티스토리 뷰
1) CSS 선언방법
- CSS의 구성
> 선택자 (Selector)
> 속성 (Property)
> 값 (Value)
ex)
span { color: red; }
선택자: span, 속성: color, 값: red
- CSS를 HTML에 적용하는 3가지 방법
> inline: HTML 태그 안에 직접 넣는 방법.
> internal: head 부분에 <style> ... </style> 로 CSS 영역을 선언하고 그 안에 쓰는 방법. 별도의 CSS 파일을 서버에서 받아올 필요가 없다
> external: 별도의 CSS파일을 만들어서 link로 연결해주는 방법. CSS코드가 짧지 않은 경우 일반적으로 가장 많이 쓰임
2) 상속과 우선순위
- CSS의 상속: 상위 태그에 적용된 스타일은 그 안에 있는 하위 태그에도 같이 적용됨
- 단 배치 관련된 일부 속성들 (box-model) 은 상속이 안됨: width, height, margin, padding, border 등
<body>
<div>
<span> 123 </span>
<p> 456 </p>
</div>
div { color : red; }
div 안에 있는 모든 텍스트들 (span, p 태그로 감싸져있는 텍스트들 모두) 이 color: red를 적용받는다.
div span { color : red; }
div 안에 있는 span 태그로 감싸져있는 123만 color: red를 적용받는다.
* div > span 으로 해도 됨. 계층관계는 공백문자 또는 >로 표현
div { color : red; border : 2px solid slategray; }
div, span, p 모두 color는 적용받지만 border는 div만 적용받는다.
- 우선순위 (Cascading)
여러 스타일정보가 중복으로 표현되어 있는 경우 무엇을 우선으로 반영할 것인가?
> 선언방식에 따른 우선순위: inline > internal = external
> id, class, element 간의 우선순위: id > class > element
> 더 구체적으로 표현된 것이 우선순위가 높음
> 같은 우선순위일 경우 나중에 나온 것이 적용
<div id="a" class="b"> text </div>
#a { color: red; } // id를 지정
.b { color: blue; } // class를 지정
div { color: green; } // element (태그) 를 지정
id가 가장 우선순위가 높으므로 red로 적용된다.
body > div { color: red; }
div { color: green; }
더 구체적으로 표현된 것은 위쪽이므로 red로 적용된다.
3) Selector 문법
- 태그로 지정하기: span { ...
- id로 지정하기: #spantag { ...
- class로 지정하기: .spanClass { ...
- 응용
> 태그 이름과 클래스를 같이 사용: div.myclassname { ...
> 그룹 선택 (여러 Selector에 같은 스타일 적용하기): h1, span, div#id { ...
> 공백과 >의 차이: 공백은 모든 자손들에 적용하고, >는 자식노드에만 적용
<div id="myid">
<div>
<span> span1 </span>
</div>
<span> span2 </span>
</div>
#myid span { ... // span1, span2 모두 스타일을 적용받음
#myid > span { ... // span2만 스타일을 적용받음
- nth-child 선택자: 특정 요소를 찾고, 그 요소의 부모의 자식들 중에 n번째 자식 (단 그 n번째 자식이 해당 요소여야 함) 에 스타일을 적용함
div:nth-child(2) { ... // 첫번째 줄 div의 두번째 자식은 span2가 있는 span 태그인데 대상이 div이므로 스타일이 적용되지 않음
span:nth-child(2) { ... // span2에 스타일이 적용됨
div:first-child { ... // div:nth-child(1) 과 같음. span1에 스타일이 적용됨
- nth-of-type 선택자: 특정 요소의 n번째 '형제' 를 찾음
div:nth-of-type(2) { ... // 2번째 div에 스타일이 적용되므로 span1이 스타일을 적용받... 아야 할 것 같았는데 스타일이 적용되지 않음. 첫번째 div랑 두번째 div의 레벨이 달라서 형제가 아니기 때문인 듯 하다. span2를 <div> 로 감싸주면 span2가 스타일을 적용받음.
이것들은 CSS 추상 클래스라고 하며 괄호 안에는 숫자 외에도 특정한 키워드나 수식이 들어갈 수 있음.
(odd, even, 3n+0 등)
4) CSS 기본 Style
폰트의 색상, 배경색, 크기, 글꼴 등을 변경하는 방법을 알아보자.
color: red;
color: rgb (255, 0, 0);
color: rgba (255, 0, 0, 0.5);
color: #ff0000;
font-size: 16px;
font-size: 1em; // 기본값 대비 상대적인 크기로 표현. 기본값은 부모 노드의 font-size를 상속받는다
background-color: #ff0000;
font-family: "Gulim";
font-family: sans-serif;
font-family: sans-serif, monospace; // 브라우저에서 지원하지 않는 폰트일 경우 후순위를 적용함
- 웹 폰트: 브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드받아서 사용할 수 있음
단 다운로드 시간이 오래 걸리면 화면이 뜨는데 오래 걸려서 사용자가 불편해질 수도 있음
<link href = "(웹폰트 주소)" rel="stylesheet">
<style>
div { font-family: "폰트명"; }
- 유니코드 이용하기
<div> Hello World ☺ </div>
5) CSS Layout: Element 배치하기
HTML 엘리먼트는 기본적으로 위->아래로 배치되는데 이렇게만 할 수 있다면 너무 단조로울 것
- Display
> block: div 등 대부분의 태그들이 기본적으로 가지는 속성으로, 위->아래로 쌓임
> inline: 노트에 쓰듯 왼쪽->오른쪽으로 쌓이며 끝에 도달하면 다음 줄로 넘어감. width/height를 적용받지 않음. span, a, strong 태그 등
> inline-block
- Position
> static: 기본값. 그냥 순서대로 배치한다.
> absolute: 어떤 기준점에 따라 상/하/좌/우에 배치한다. 기준점은 'static 상태가 아닌' 상위 엘리먼트 (없으면 body가 기준이 됨). top, left 속성을 꼭 주는 것이 좋다.
> relative: 원래 있어야 할 곳 (static) 을 기준으로 상/하/좌/우로 몇 px만큼 떨어진 곳에 배치할 수 있다.
> fixed: 뷰포트 (전체 화면) 를 기준으로 특정한 위치에 배치함. 광고처럼 스크롤을 해도 계속 그 위치로 따라온다.
- Float: 기본 배치에서 벗어나서 '떠있을' 수 있음. 다른 block 엘리먼트들이 float인 것은 무시하고 배치된다.
> left
> right
ex) <div> 블록이 두 개 있으면 기본적으로 상-하로 배치되지만, float:left를 주면 좌-우로 배치할 수 있음
- box-model
margin, border, padding, box-shadow 등을 이용해 영역과 여백의 크기를 정할 수 있다.
padding: 25px; // 상하좌우 25px
padding: 25px 0px; // 상하는 25px, 좌우는 0px
padding: 25px 0px 10px 5px; // top-right-bottom-left 순서
> 엘리먼트의 크기는 부모의 크기가 기준값임
width: 100%; // 부모의 크기와 같아짐
> box-sizing 속성: border-box, content-box
width, height의 기준을 border로 할 것인지 content로 할 것인지 정할 수 있음.
- 결론 & 레이아웃 구성 팁
> float를 사용해서 2단, 3단 컬럼 배치를 구현
> 특별한 위치에 배치하기 위해서는 position:absolute를 사용하고 기준점을 relative로 설정
> 메뉴 바 같은 것은 inline-block을 사용해서 가로로 배치
> 엘리먼트 안의 텍스트 간격, 엘리먼트간의 간격은 padding, margin을 이용해서 조정
6) float를 이용한 레이아웃 만들기
- overflow 속성 (#wrap): float를 적용하면 기본적으로 부모가 자신을 자식으로 인식하지 못하게 되는데, 부모에다가 overflow 속성을 사용하면 인식시켜줄 수 있음
- clear 속성 (footer): left, right에 float를 적용하면 footer가 위로 올라갈텐데 그렇게 되지 않도록 함. 즉 footer가 위의 float:left에 영향을 받지 않고 그대로 있게 한다
- list-style (li): 리스트 옆에 기본적으로 뜨는 점을 다른 모양으로 바꾸거나 없앨 수 있음
- width %: 같은 줄에 있는 엘리먼트들의 width와 margin 등을 합한 %값 총합이 100%를 넘겨버리면 다음 줄로 넘어가버리거나 제대로 안뜬다. 예를 들어 left의 width를 20%로 놔둔 채로 margin-right: 3%를 추가하면 이상하게 뜸. 그래서 width를 17%로 조정했다.
7) HTML&CSS 디버깅
- 크롬 개발자 도구 이용하기: Elements 탭
특정한 줄을 클릭하면...
> 아래쪽에 이 엘리먼트에 대한 계층 정보가 나타남
> 오른쪽의 Styles 탭으로 가면 이 엘리먼트에 적용된 CSS 스타일들이 나타남. 취소선으로 되어있는 건 무시되고 다른 스타일이 적용되었음을 의미
> Computed 탭으로 가면 어떤 속성들이 적용되었는지 쭉 나옴
> Styles 탭에서 CSS 코드를 수정하면 페이지에 실시간으로 변경된 스타일이 적용됨