HTML/CSS

1. position 속성 - static, relative, absolute, fixed

postion : 태그의 위치를 결정하는 CSS 속성이며, 문서 상에 요소를 배치하는 방법을 지정한다.

top, right, bottom, left 속성을 통해 요소를 배치할 최종적인 위치를 결정한다.

프로퍼티 값은 배치 방식에 따라서 크게 static, relative, absolute, fixed 네 가지로 나뉜다.

1) static
요소를 일반적인 문서 흐름에 따라 배치함.
top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는 기본값.

2) relative
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 최종 위치를 결정한다. 해당 위치에 대한 결과는 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.

3) absolute
가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 body 태그를 기준으로 삼는다. 최종 위치는 top, right, bottom, left 값이 지정한다.

4) fixed
부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 (top, right, bottom, left ) 를 사용하여 위치를 이동시킨다. 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.

단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 그 조상을 기준으로 삼는다.

원본 이미지:https://media.vlpt.us/images/jy0791/post/8d2b19e9-c9bd-4dda-ba65-4379254b0ce9/image.png

2. display 속성 - inline, block, line-block

display는 요소를 block과 inline 중에서 어느 쪽으로 처리할 지를 결정하는 CSS 속성

1) inline
개행(줄바꿈)을 하지 않고 여러 요소가 한 줄에 표현되는 것을 말한다.
<span>, <a>, <img> 태그 등이 inline 요소에 속하며, inline은 해당 content가 차지하는 만큼의 공간만 갖는다.

2) block
display 속성이 block으로 설정된 요소의 같은 라인에는 어떠한 다른 요소도 함께 있을 수 없다. 다른 요소의 접근을 막는(block) 속성이다. <div>, <h1~h6>, <p> 태그 등이 속하며, 한 줄 전체를 점유한다.

3) inline-block
inline과 block의 속성을 합친 속성이다. inline과 같이 한 줄로 요소를 나열할 수 있으며, 동시에 block처럼 크기와 위치를 조정할 수 있다. inline-block 적용 시에 요소 간의 공백이 발생하는데 이는 상위 태그(div)를 {font-size:0} 로 적용하면 공백을 없앨 수 있다. 상하 높이의 차이는 {vertical-align: top;} 등의 방법을 통해 해결할 수 있다.

원본 이미지:https://i1.wp.com/www.tutorialbrain.com/wp-content/uploads/2019/06/CSS-Display.png?fit=474%2C379&ssl=1&is-pending-load=1

3. float 속성

float 속성은 웹 사이트 전체의 레이아웃을 구성(웹 사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것) 하거나, 요소들을 정렬하는 방법 중의 하나이다.

정렬하고자 하는 요소에 대하여 CSS Selector를 통해 {float: left(or right);} 같은 방식으로 원하는 위치로 정렬할 수 있다. 웹 사이트 전체적인 구성 상, 메인 컨텐츠의 좌,우에 위치하는 사이드바(<aside>)의 위치를 정의하는 등의 목적으로 활용된다. 또는 이미지를 텍스트와 함께 배치하기 위한 목적으로도 사용할 수 있다.

상황에 따라 float을 해제하고, float 요소의 아래에 위치시켜야 하는 경우에는 clear라는 속성을 사용한다. {clear: left/right/both;} 를 통해 정렬된 방향에 맞게 요소를 이동시킬 수 있다.

float 속성을 통해 정렬을 하였으나, 요소 간의 높이의 차이로 인하여 외관 상 깔끔하지 못한 경우에는 {overflow: auto} 를 통해 크기를 조정할 수 있다.

원본 이미지: http://www.vanseodesign.com/blog/wp-content/uploads/2009/10/2-column-layout.png

4. 그 외에 알게 된 것들

• 닫힌 태그가 필요 없는 태그들은 태그 안에 내용(content) 가 필요 없는 태그들 (img, br 등)
• <meta name="viewport" content ="width=device-width"> : 디바이스 가로 = 웹 페이지 가로
• 폰트 스타일 지정할 때, "font style" 처럼 폰트 이름에 띄워쓰기가 있는 경우 따옴표가 필요함
• 들여쓰기를 부여하는 속성은 text-indent
• <blockquote> 는 인용구를 의미하는 태그임
• 내용 안에서 강제로 스페이스를 주고 싶은 경우 :  
• margin / padding 조건 줄 때, 위 - 오른쪽 - 아래 - 왼쪽 (맨날 헷갈림)
• img 태그의 alt 속성 : 이미지가 로딩 안될 경우 대신해서 보여주는 텍스트
• input 태그는 일반적으로 div로 감싸고 div 태그에 css 를 적용하는 방식으로 사용한다.
• textarea 는 resize 가 가능하도록 디폴트로 설정된다. 해당 속성을 non으로 부여하면 없앨 수 있다.
• position: relative; 적용 후에 본인에게 top, left 속성을 부여하여 위치조정 가능하다.
• position: absoulte; 적용되면 기존 display 속성이 block 에서 inline 으로 바뀐다.