헷갈리는 혹은 새로배운 CSS/HTML 정리

주요 concept 정리

1. position 속성(relative, absolute, fixed)

1.1 relative

• 자체만으로 이동하거나 특별한 의미가 있는건 아니며, 자식들이 absolute로 지정되어서 부모인 relative를 기준으로 배치되게 됨 (즉 absolute를 쓸때 영역을 잡아주는 역할을 한다고 볼수 있음 )
• top/right/bottom/left 프로퍼티를 통해 원래 위치에서 이동 가능

1.2 absolute

• 특정 부모에 한해 절대적으로 위치하게 되는데, relative,fixed, absolute를 부모로 두고 부모기준으로 배치되게 됨

• 예를 들어 absolute가 width 100 height 100으로 이동하면 relative에서 지정된 범위 안에서 가로100/세로100 씩 움직임

  쉽게 설명된 블로그에 따르면 relative는 엄마, absolute는 말안듣는 자식이어서 
  엄마가 boundary를 쳐두고 그안에서만 놀게끔 허락한다고 보면 된다고 한다
    아래 그림을 참조해 보자 

  
  출처 : (http://blog.naver.com/tkdgus830416/70173677850)

1.3 fixed

• 문서를 기준으로 위치가 지정되며 스크롤이 움직여도 항상 그 위치에 고정됨, 부모 요소의 영향을 받지 않음
• 보통 웹사이트내에서 고정된 헤더값혹은 공지나 광고 주는데 사용됨
  -아래 pink box가 fixed값으로 고정되어 있는걸 볼 수 있음

2. inline, inline-block, block

2.1 inline

• 줄바꿈이 되지 않으며 width,height 속성 사용불가함, 상하 margin/padding 속성 사용또한 불가
• 대표적인 inline 엘리먼트로 span이나 a, em 태그 등을 들 수 있음

2.2 inline-block

• display 속성이 inline-block이면 기본적으로 inline element 전후 줄바꿈 없이 한 줄에 다른 element와같이 나란히 배치되나 inline 엘리먼트에서 불가능하던 width/height/margin/padding 속성의 적용이 가능해짐
• 대표적인 inline-block 엘리먼트로 button이나 select 태그가 있음
• 예를 들어 block태그인 h2 를 display inline-block화 할경우 h2도 inline 처럼 변경 가능

2.3 block

• 줄바꿈되며, width,height,margin,padding 속성 적용 가능함
• div나 p, h1 태그 등을 들 수 있음
• 예를들어 inline 속성을 원래 가지고 있는 요소에 block으로 display를 지정해주면 아래와같이 block요소를 가진 span으로 변함

3. float와 clear

3.1 float의 사용

• 개발의 시작은 이미지 주변에 텍스트를 감싸기 위해 만들어 졌으나, 전체레이아웃을 잡을때 매.우.중.요.함(요새는 flex기능을 많이 쓰고 있으므로 flex를 연습하는것이 중요한데 연습은 깨굴로 해볼 수 있음(https://flexboxfroggy.com/#ko)), 먼저 float이 기본적으로 사용되는 형태를 보자면 아래와 같음
  - 기본적으로 float적용하지 않을때는 div와 p 태그는 block요소여서 그린박스 밑에 존재 했겠지만, 그린박스에 float left 로 적용함으로서 글자가 감싸게 됨

-float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있음

예를 들어

img { 
float: right;
margin: 0 0 1em 1em;
}

이렇게 했을때 이미지가 오른쪽으로 가고 text가 이미지를 감싸는 형태로 구현 가능

3.2 clear의 사용

• clear는 float의 동작을 제어할때 사용됨
• float이후에 오는 요소에 clear 해주지 않으면 겹치는 현상이 나올 수 있음

3.3 float를 이용한 레이아웃 예제

4 flex

4.1 가로정렬하기 위해 만드는 div 안에 표현해서 사용하는법
4.2 가운데 정렬
-부모에게 flex값을 줌, 보통 부모한테 주는 속성 값
-align-items : center(세로 가운데 정렬)
-justify-contents: center

기타 내용 정리(간단하지만 까먹을 수 있는 내용 위주, CSS/HTML)

font family

• css에서 font 적용할때, 띄어쓰기가 있는 font는 ""안에 넣어줘야 함

#title {
font-family: Georgia, "Times New Roman", Times, serif;
}

font weight

• 100~900까지의 숫자, bold,normal로 지정가능하며 400=normal 700=bold로 표현 가능함

text-indent

• css에서 들여쓰기(html 스페이스와 엔터를 사용해도 띄어쓰기 적용이 되지않기 때문)

.js-description {
	text-indent: 50px
    }

blockquote(HTML)

• 인용문구를 넣을때 쓰는 태그이며, 브라우저에서 Block태그에 양쪽 여백을 넣는 기본 스타일을 자동으로 적용할때 사용됨

<blockquote class="js-description">

space 추가하기(HTML)

• &nbsp 가 한 space를 의미함

<p>스페이스 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;넣는 예제</p>

CSS Selector 결합

• 모든 span이 아니라 pre class안의 span을 지정할때 아래 space로 띄워서 지정함

.pre span {
  background-color: yellow;
}

CSS Specificity

• Selector의 우선순위는 아래와 같다.

• tag <<<<< class <<<< id <<<<<< inline css

  	inline styling(13줄에 style 요소로 직접): 1000점
  	id: 100점
  	class: 10점
  	tag: 1점

CSS li태그에서 선택해서 효과 적용하기

• li 에서 첫번째 선택하려면

selector:first-child {
}

• li 에서 마지막순서 선택하려면

selector:last-child{
}

• li 에서 홀/짝 순서 선택하려면

selector:nth-child(odd or even) {
}

내일은 좀 더 깔끔한 정리를 할 수 있길 바라며..

화이팅!!!!!!!!!!!!