생활코딩 CSS 정리

CSS

1. 웹을 아름답게 만들기 위한 방법.

   a. html에 새로운 태그를 만들기 ex) font 태그

   ㄱ. 어떠한 정보도 가지고 있지 않다. 디자인 만을 가지고 있다.

   ㄴ. 정보로서의 가치가 떨어지고 수정이 매우 어려움. 100억 개의 텍스트를 모두 빨간색으로 수정하려면? > 100억 번 코드를 작성해야 한다.

   b. 완전히 새로운 언어, CSS 를 만들기

   ㄱ. 웹브라우저는 기본적으로 언어를 html로 인식한다. style 태그를 사용하면 style 안에 있는 내용은 CSS 문법에 맞게 처리한다.

   ㄴ. a {color:red;}, 모든 a 태그에 대해서 빨간색으로 해라.

   ㄷ. 똑같은 내용의 중복 없이 단 하나의 코드 만으로 가능하다. 웹 페이지의 사이즈가 훨씬 줄어든다. 유지 보수, 가독성에도 유리.

   ㄹ. 본문의 코드에는 디자인의 내용이 빠지기 때문에, html이 정보에 전념할 수 있다. 웹페이지를 해석할 때 디자인이 필요 없다면, 디자인 부분은 무시하고 바로 본문에 접근한다.

2. 전체 a 태그가 아닌 특정한 a 태그에만 CSS 문법을 적용하고 싶으면 속성을 활용한다.

   a. a 태그 안에 style = “color:red” 를 추가한다.

   b. 누구에게 효과를 줄 지를 선택해야 한다.

   ㄱ. style 태그는 color:red (효과)만으로는 누구에게 효과를 줄지 알 수 없으므로 a 와 같은 추가적인 코드가 필요하다.

   ㄴ. html의 style이라는 속성은 그 속성의 값을 웹 브라우저가 CSS의 문법에 맞게 해석해서 그 결과를 그 속성이 위치하고 있는 태그에 적용하도록 명령한다.

   ㄷ. 누구에게 효과를 줄지 선택하는 a 와 같은 것을 선택자(selector)라고 한다. 선택자에 의해 지정되는 것을 효과(declaration, 선언)라고 한다.

   ㄹ. 효과에서 style 태그를 직접 사용하는 경우에는 선택자가 필요 없다.

   (ㄴ과 같은 경우)

   ** 정리: 웹페이지에 CSS를 삽입하는 방법은 style 태그와 style 속성을 사용하는 방법이 있다.

3. 밑줄을 제거하려면, text-decoration: none; 사용, 밑줄 추가하려면 text-decoration:underline;

   a. text-decoration 같은 것들은 속성(property), none을 값(value)라고 한다.

4. 텍스트를 같은 그룹(클래스)로 묶을 수 있다.

   a. class=”saw”, 이 부분은 css가 아닌 html이다. saw라는 클래스 값을 가진 태그를 만든 것.

   b. 해당 태그에만 CSS 문법을 적용할 수 있다. 이때 앞에 .을 붙여줘야 한다. 그냥 saw로만 쓰면 saw라는 이름의 모든 태그를 의미하게 된다. 우리가 하고 싶은 건 클래스 값이 saw인 태그를 원하는 것이기 때문에 .을 붙여줘야 한다.

   c. 클래스 속성의 값은 여러 개가 들어올 수 있고, 띄어쓰기로 구분한다. d. 하나의 태그에는 여러 개의 속성이 들어올 수 있다.

   e. 가까이에 있는(가장 최근의) 명령이 더 큰 영향력을 갖는다. 서순에 따라 결과 값이 달라질 수 있으므로 더 우선순위가 높은 선택자가 필요하다. » id

   ㄱ. id 선택자는 class 선택자보다 우선순위가 높다. class 선택자는 태그 선택자보다 우선순위가 높다.

   ㄴ. id 선택자는 #으로 표시한다. class 선택자는 .

   ㄷ. 우선순위가 모두 같은 선택자의 경우, 가장 마지막에 등장한 선택자가 우선순위가 높다.

   f. id는 중복되어선 안되는 유일무이한 값. 좀 더 구체적인 것이 포괄적인 것(태그 선택자)보다 우선순위가 높다. 클래스 선택자는 id와 태그의 중간. 포괄적인 작업을 먼저 처리한 뒤, 예외적인 작업을 하는 게 훨씬 효율적이다.

5. 박스 모델

   a. h1 태그는 화면 전체를 사용하는 태그이므로 줄 바꿈이 된다. 반면 a 태그는 자기 자신의 내용의 크기 만큼만 사용하므로 줄 바꿈이 되지 않는다. 이런 차이를 border 속성을 통해 육안으로 확인 가능하다.

   ㄱ. 전체를 사용하는 태그: block level element

   ㄴ. 내용의 크기 만큼만 사용하는 태그: inline element

   ㄷ. display 속성을 통해 block도 inline으로 표현 가능하다. 반대도 가능.

   b. , 를 통해 선택자를 한번에 여러 개 사용할 수 있다.

   c. padding(여백), margin(테두리 사이 간격), width(block 폭) 등의 속성등을 통해 박스를 컨트롤할 수 있다.

   ㄱ. border를 기준으로 안쪽은 padding, 바깥은 margin

   d. 웹페이지 우클릭 > 검사 기능 잘 활용하기.

   f. html 태그 하나 하나를 박스로 취급해서 부피감을 결정하는 것. 디자인의 핵심적인 요소.

6. 그리드

   a. 텍스트를 나란히 배치하기 위해 어떤 의미도 가지지 않는 디자인 만을 위한 태그가 필요하다. » div(block), span(inline) 을 이용해 각각의 텍스트를 묶는다.

   b. 두 개의 태그를 나란히 배치하고 싶으면 그것을 감싸는 부모 태그가 필요하다.

   c. 부모 태그에 id를 부여하고 해당 id 의 style에 grid을 사용하면 같은 열, 행 등에 배치할 수 있는 다양한 template를 지원한다.

   d. fr은 화면 전체를 얼마나 사용할 지 자동으로 조정되는 단위

   e. grid ol 로 쓰면 부모가 grid인 ol 태그를 가리키는 선택자가 된다. 의미를 더 분명히 하기 위함.

7. 반응형 디자인과 미디어 쿼리

a. 반응형 디자인: 화면의 크기에 따라 최적화된 모양으로 바뀌는 것

b. 미디어 쿼리: 반응형 디자인을 만드는 데 필요한 것

ㄱ.만약 화면 크기가 800px이 넘어가면 텍스트가 보이지 않도록 하려면, media(min-width:800px)을 이용한다.

ㄴ. media() 안쪽에는 조건을 적고 {} 안에 바꾸고 싶은 내용을 적으면 된다. grid, ol 같은 선택자도 그대로 사용할 수 있다.

1. 코드의 재사용

   a. 1억 개의 파일의 내용을 일일이 수정할 순 없다! 중복을 줄여야 한다.

   b. css 파일을 별도로 만든다. link 태그를 사용하면 일일이 코드 적지 않아도 css 파일을 다운 받아서 웹페이지에 적용하게 된다.

   c. 하나의 웹 페이지에서 여러 개의 파일을 다운 받는 게, 웹 페이지 안에 css 코드를 내장하는 것 보다 그 자체로는 비효율적이지만, 캐싱(저장)이라는 기술 때문에 더 효율적이 다.

   ㄱ. 이미 한번 다운로드 받았다면 파일이 바뀌기 전까진 저장된 파일을 네트워크를 사용하지 않고 빠르게 적용할 수 있다.

   ㄴ. 트래픽, 인터넷 사용료의 절감