.sectionh2{/*하위 결합자를 사용하여 section내의 모든 h2 요소를 설정 */
font-size:32px;
color: deeppink;
font-weight: bold;
margin-bottom:20px; /*하단 바깥여백을 20px 지정*/
}
.listli{
border-left:5px solid #999; /*리스트의 왼쪽 테두리 스타일 지정*/
padding:20px10px;/*안쪽여백 상하30px 좌우 10px 지정*/
margin:10px;/*상하좌우 바깥여백을 사용하여 간격 띄우기*/
padding-left:30px;/* 왼쪽 여백을 사용하여 왼쪽 테두리 간격 띄우기*/
}
.listli:hover{/* :hover 를 사용하여 마우스 리스트의 li에 마우스 포인터를 올려 상호작용을 시킴*/
border-color:deeppink;/*마우스 커서 상호작용시 테두리 색상 변경 */
color: deeppink;/*마우스 커서 상호작용시 글씨색상 변경*/
font-size:16px;/*마우스 커서 상호작용시 폰트크기 변경*/
}
.footer{/*하단콘텐츠*/
background-color:#f4f4f4;/*배경색상 지정*/
padding:12px0;/*안쪽 여백 상하12px 좌우 0px 지정*/
text-align: center;/*텍스트 및 인라인요소 중앙정렬*/
color:#999;/*글씨색상 지정*/
}
■ 클래스 셀렉터 (class selector) 클랙스 셀렉터는 HTML 요소의 class 속성을 기반으로 요소를 선택하며 이때 선택하려는 속성값 앞에 마침표(.)를 추가하고 작성한다. 우리가 여태 마침표를 쓰지않은 이유는 태그 선택자 즉, HTML 요소를 직접 지칭 하기에 작성하지 않았던 것이다. (<div>,<p>등)
●타입 셀렉터와 클래스 셀렉터 입력방법 클래스 셀렉터를 보면 굳이 타입 셀릭터와 같이 쓸필요가 있을까 하고 의문이 들텐데 이렇게 써도 적용이 된다고 보여주는 것도있고 셀렉터 특정성 점수 (Selector Specificit) 의 이유도 있다 이 내용은 나중에...
● 다중 셀렉터 입력방법
다중 클래스를 사용하여 여러 요소를 동시에 선택하여 적용 할 수 있다.
● 하위 셀렉터 입력방법
display block은 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들이다. inline은 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 특징이있다.
왼쪽부터 block (div,ul,li,h1~h6,p 등) / inline (strong,span,a,img 등)
block 는 한줄 전체에 할당 받으며 박스모델 모두 사용 가능하지만 inline 은 텍스트 배치의 흐름이기에 박스모델 중 일부만 지원한다. inline은 width,height 의 개념이 없으며 margin,padding 좌우로만 적용 가능하고 padding은 상하단 보여지긴하지만 공간을 차지하지 않아서 레이아웃 구성이 어렵다는 단점이있다. 또한 border 적용은 가능하나 중간에 줄바꿈이되서 마찬가지로 레이아웃 구성이 어렵다.
이러한 inline의 단점을 부각시키고 block 처럼 박스 모델 모두 사용가능한 표현이 display : inline-block 이 있다,
inline 속성과 같이 줄바꿈 없이 한줄에 적용되며, block 속성과 같이 크기 등을 조절할 수 있다.
★결론적으로 block의 장점과 inline의 장점을 모두 가지고 있는 표현 방식이 inline-block 이며 inline이기 때문에 콘텐츠의 양만큼 전체 너비가 자동 조절된다, 부모요소에게 지정된 text-align, vertical-align 속성에 영향 받으며 정렬에 용이하다. block이기 때문에 원하는 width, height 속성값을 직접 지정 할 수 있으며 박스모델을 자유자재로 사용 할 수 있다.
■ vertical-align은 inline 요소와 table 셀 요소 내부의 수직(vertical) 정렬을 지정한다.이 어떠한 요소가 부모 요소의 기준선에 상대적으로 어떻게 수직(vertical) 정렬(align)되는지를 설정한다. 단 inline 요소에만 적용되므로 block 요소는 적용되지 않는다.
● Baseline
글자의 크기가 달라도 보이지 않는 어떠한 선에 맞춰저있다.
English와 한글이 동일안 선에 맞춰저있는 것을 확인 할 수 있다. 이러 한 선이 baseline이다.
1. baseline: vertical-align의 기본값. 이미지와 텍스트 등의 요소는 기본적으로 이 baseline을 기준으로 배치가 된다. 글자가 앉아있는 선이다. 한글과 다르게 영어소문자에만 있는 g, j, p, q, y와 같이 끝이 밑으로 내려가는 부분(decender)은 baseline 밑으로 내려간다. 2. top: vertical-align상의 상단부분. 3. bottom: vertical-align상의 하단부분. 4. middle: vertical영역의 중간이 아닌 알파벳 소문자의 중간이 middle값이 된다. 폰트 종류가 바뀌게 되면 middle값도 상대적으로 바뀌게 된다. (만약 텍스트와 이미지를 나란히 놨을 때 이미지에 vertical-align: middle속성값을 넣으면 이미지는 텍스트의 소문자
