Codesigner

저번 포스팅에서는 HTML 요소를 포지셔닝하는 다섯 가지 속성 중 첫 번째인 position에 대해서 알아보았다. 이번 포스팅에서는 나머지 속성들에 대해서 알아보도록 하자 Z-Index 웹 페이지 상의 박스들이 포지셔닝 될 때 서로 오버랩될 수 있다. 이는 해당 박스의 콘텐츠를 읽기 어렵게 만드는 요인으로 작용한다 .box-top { background-color: Aquamarine; } .box-bottom { background-color: DeepSkyBlue; position: absolute; top: 20px; left: 50px; } 위 코드에서 아래쪽 박스는 위쪽 박스를 무시(ignore)하여 이를 오버랩한다. z-index 속성은 웹 페이지 상의 요소들이 얼마나 '뒤로' 가고 '앞으로'..

브라우저는 CSS파일이 포함되지 않은 순수 HTML 파일의 요소들을 왼쪽에서부터 오른쪽으로, 위에서부터 아래로 요소가 HTML 파일 상에서 존재하는 순서대로 렌더링 한다. 이를 HTML 요소들의 흐름(flow)라고 한다 HTML 요소들을 스타일 하는 속성에 더해, CSS는 브라우저가 요소들을 위치시키는(positioning) 속성들을 또한 포함한다. 이러한 속성들은 요소가 어디에 위치해야 하는지, 다른 요소들과 같은 줄에 위치할 수 있는지, 그리고 이와 관련된 다른 여러 속성들을 설정할 수 있다 이번 포스팅에서 다음과 같이 HTML 요소를 포지셔닝하는 다섯 가지 속성들에 대해서 알아보도록 하자 position display z-index float clear 각 속성들은 우리가 웹 페이지의 요소들을 위치..

저번 포스팅에서 박스 모델의 중요한 네 컴포넌트: 차원, 테두리, 패딩, 마진에 대해서 알아보았다. 그런데 이러한 박스 모델의 차원에서 한 가지 문제가 존재한다 Hello World h1 { border: 1px solid black; height: 200px; width: 300px; padding: 10px; } 위 코드는 h1 요소의 박스는 1px의 검은 실선 테두리를 가지게 된다. 이 박스의 height는 200px이고 width는 300px인데, 모든 방향의 패딩이 10px씩 더해졌다 위의 현재 박스 모델에서, 테두리의 굵기와 패딩은 박스의 차원에 영향을 미친다. 10px의 패딩은 height는 220px 만큼 커지게 하고 또한 width를 320px만큼 늘린다. 그리고 1px의 테두리가 또 포..

지금까지 박스 모델의 컴포넌트: 콘텐츠, 테두리, 패딩에 대해서 알아보았다. 이번 포스팅에서는 네 번째 컴포넌트이자 마지막 컴포넌트인 마진(margin)에 대해서 알아보자 Margin I 마진은 박스의 외부의 공간을 말한다. margin 속성으로 이 공간의 크기를 조절할 수 있다 p { border: 1px solid aquamarine; margin: 20px; } 위 코드는 모든 p 요소의 박스 외부에 20px만큼의 공간을 설정한다. 이는 다른 HTML 요소들이 각 p 요소들과 적어도 20px 만큼 떨어져야 한다는 것을 의미한다. 만약 한 방향에 대해서만 외부 공간을 설정해주고 싶다면, 다음과 같은 속성을 사용할 수 있다 margin-top margin-right margin-bottom margin..

브라우저는 HTML 요소들을 화면에 렌더링 할 때 디폴트 포지션 값에 위치시킨다. 이러한 기능은 때로는 우리가 원하지 않거나 예상치 못하는 결과를 낳기도 하는데, 이번 포스팅에서는 CSS가 어떻게 HTML요소를 화면에 위치시키고 보여주는지를 이해하는데 중요한 개념인 박스 모델(Box model)에 대해서 알아보도록 하자 저번 포스팅에서 한 HTML 요소의 background-color 속성의 값을 변화시켜 주면 해당 요소를 감싸는 사각형 형태로 배경색이 지정되었다. 또, text-align 속성으로 텍스트를 정렬하면 정렬이 상대적인 위치에서 이루어졌다. 이것들이 바로 CSS의 박스 모델이 적용되었다는 증거이다. 웹 페이지 상에 모든 HTML 요소들은 박스로 표현되고, 크기, 위치, 속성(색, 배경, 테두..

이 글에서는 CSS 기본 문법 및 구조에 대해서 살펴보도록 하자. CSS Structure HTML 요소를 CSS로 스타일 하기 위해선, CSS Selector로 요소를 지정해야 한다고 이전 글에서 배웠다. h1 { color: blue; } 결과: 파란글씨 curly brace( { } )로 감싸진 부분을 Selector의 body라고 하자. 위의 코드는 태그의 body에 color 속성을 blue로 설정해 주었다. "color: blue" 라인을 CSS declation이라고 하는데, CSS declation은 하나의 property와 그에 해당하는 value를 가진다. Property - 선택한 요소에 대해 스타일링하고자 하는 속성(i.e., size, color, etc.) Value - 해당 속..