공부하고 또 공부하는

[개요] 아래와 같은 디자인의 CSS 작성방법입니다. [예시] [결과] 좌우로 배치하는 것은 float와 clear를 이용하면 구현할 수 있습니다. 가운데 정렬 또한 텍스트이기 때문에 text-align 속성을 이용하면 됩니다. 하지만 수직 가운데 정렬은 아래와 같이 구현할 수 있습니다. [padding] 첫번째로 많이 사용되는 방법은 padding을 이용한 방법입니다. 상하 여백이 얼마인지 아는 경우라면 그에 맞춰서 텍스테에 상하 padding을 주면 됩니다. [예시] [결과] [line-height] line-height는 본래 줄 간격을 나타내는 매트릭이지만, 인라인 요소의 수직 가운데 정렬을 구현하기 위해서도 널리 이용됩니다. 이 값은 160%, 1.8 등 비율로도 표현할 수 있지만 px단위로도 ..

[개요] CSS에서 width와 height를 계산하는 방법은 꽤 독특합니다. width:200px 이고 height:100px, padding:20px, border:5px solid black 인 요소는 화면상에 어떻게 나타날까요? 아래 사진 중에 왼쪽처럼 계산 될까요? 아니면 오른쪽처럼 계산될까요? [content-box] 결론부터 이야기하자면 기본적으로 오른쪽처럼 그려지게 됩니다. width를 200px로 설정했다고 할지라도 전체 너비가 200px이 되는 것이 아닌, 여기에 padding과 border-width가 더해져서 그려지게 됩니다. 이는 계산 방법을 content-box라고 하며, box-sizing 속성을 content-box로 주게 되면 이와 같이 계산하게 됩니다. 기본적으로 CSS에..

[개요] margin 과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. margin 과 padding 은 border 를 경계로 나뉩니다. [방향] 방향마다 여백을 다르게 설정할 수 있습니다. margin:10px - 상하좌우 모두 20px을 의미합니다. margin:10px 20px - 상하 10px, 좌우 20px을 의미합니다. margin:10px 20px 30px - 위 10px, 좌우 20px, 아래 30px을 의미합니다. margin:10px 20px 30px 40px - 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px 을 의미합니다. 즉, 방향의 위부터 시계방향으로 회전하여 위 ..