공부하고 또 공부하는

[개요] 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 을 의미합니다. 즉, 방향의 위부터 시계방향으로 회전하여 위 ..

[개요] width 와 height 속성은 각각 가로 길이, 세로 길이를 의미합니다. 값을 정의할 때는 "100px" 처럼 숫자 뒤에 단위를 표시하여 적습니다. (px는 픽셀이라는 의미이며, '50%'처럼 '%' 단위를 사용할 수도 있음.) [사용법] #box{ width: 100px; height: 60px } [예시] 150x80 90x120 [결과]

[개요] Cascading Style Sheets의 약자 HTML을 웹사이트에서 화면에 표시되는 정보를 약속한 것. css는 구체적으로 어떤 스타일로 요소가 표시되는지를 정하는 규격이라고 할 수 있습니다. 초기의 웹은 HTML 하나로 문서의 뼈대로 만들고 꾸미기도 하였지만, 공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재합니다. css는 이런 문제를 해결함과 동시 웹페이지의 내용과 스타일(표현)을 분리해주어, 역할 분담도 되는 효과를 가지고 있습니다. [사용법] CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이가 존재합니다. 기술하는 방법은 아래의 3가지가 있습니다. 1. HTML 태그의 style 속성을 이용..