프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

요소를 일반적인 문서흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 좡 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left값이 지정합니다. HTML 삽입 미리보기할 수 없는 소스 문서의 흐름에서 제거된다 => 마치 float를 left나 right로 줬을 때 처럼 공중에 한겹 붕 뜨게 된다. 그렇기 때문에 아래 있는 것들이 위로 올라오게 된다. position : absolute인 요소는, 조상 중에서 position이 static이 아닌 요소를 찾아 기준점을 삼는다. static이 아니고 absolute나 relative면 적용 가능하다.

HTML 삽입 미리보기할 수 없는 소스 position : relative 일 때, top, bottom, right, left 다 설정이 가능하나 서로 반대되는 값(top-bottom/ right-left)을 동시에 지정 할 경우에는 top과 left가 우선 적용 된다.

HTML 삽입 미리보기할 수 없는 소스 visibility : hidden; => box가 사라진다. box2가 차지했던 자리는 그대로 유지가 된 채로 display : none; => box가 사라진다. 원래 없던 것 처럼

inline ex) span... - 영역의 크기가 내부 콘텐츠 크기로 정해진다. - margin, padding 의 top/bottom을 지정할 수 없다. - 여러 요소가 가로 배치가 된다. block ex) div... - 영역의 크기를 width,height로 지정할 수 있다. - width를 지정하지 않으면 가로 전체를 차지한다. - 여러 요소가 세로로 배치가 된다. inline-block ex) input... - 영역의 크기를 width,height로 지정할 수 있다. - margin, padding 전체적으로 적용 가능하다. - 여러 배치가 가로로 배치된다.

HTML 삽입 미리보기할 수 없는 소스 calc() width : calc(100% - 200px) : 가로길이 100%에서 200px만큼의 길이를 뺀 것 ※주의할 점 사칙연산 앞 뒤로 공백을 넣어주어야 한다. 개발자도구(F12)에 들어가서 computed를 확인해보면 브라우저가 px로 계산한 값을 볼 수 있다. min(), max() width : min(100%, 500px) : 두개의 값 중에 작은 값을 브라우저가 선택한다. width : max(100%, 500px) : 두개의 값 중에 큰 값을 브라우저가 선택한다. ※주의할 점 min과 max는 IE에서는 적용이 안됨으로 적용되는 브라우저를 잘 확인해야 한다. 만약 viewport의 사이즈가 변경되면 둘 중 작은값을 다시 선택하여 설정하게 된다.

HTML 삽입 미리보기할 수 없는 소스 상대길이는 결국 브라우저에 의해서 px로 계산되어진다. [계산된 px 값 알아보기]

word-break : break-all; : 가로길이의 px를 지정해 놨을 때 text가 지정된 px 안에 있도록 해주는 것 word-break : keep-all; : 가로길이의 px를 지정해 놨을 때 text가 지정된 px 안에 있지 않는 것 HTML 삽입 미리보기할 수 없는 소스

HTML 삽입 미리보기할 수 없는 소스 text-decoration에 색을 설정하면, 자동으로 글자색도 변하게 되는데 이 때 각각에 컬러 선택을 해주면 따로 바뀌게 된다. (순서는 상관이 없다) text-decoration에 순서는 상관 없지만 line 관련된 속성들은 붙여서 써주어야 한다.

HTML 삽입 미리보기할 수 없는 소스 text-indent는 block요소이다. 그렇기 때문에 inline 요소에는 적용되지 않는다.

HTML 삽입 미리보기할 수 없는 소스 p 태그는 block요소이기 때문에 가로길이에 맞추어서 text가 정렬된다. span 태그는 inline요소이기 때문에 내용물의 길이에 따라서 맞춰지기 때문에 text-align이 적용되지 않는다. 만약 span태그 안의 text 위치를 옮기고 싶으면 .container { text-align: center; } div태그(block요소이기 때문)에 text-align을 적용하면 된다.