참좋은 HTML, CSS

transition 은 css 의 속성값(color, width, font 등) 을 일정시간동안 변화할 수 있게 해주는 속성이다. 1. transition-property transition-property 는 transition 이 되는 속성값을 지정할 수 있다. p { transition: 2s 1s; transition-property: width color; width: 150px; height: 150px; color: red; } p:hover { width: 250px; color: blue; } transition-property 를 통해 width 와 color 속성만 변화할 수 있게 지정했다. 각각 width 는 2s, color 는 1s 동안 변하게 된다. 2. transition t..

상속이란 부모요소에 적용한 스타일이 자식요소에도 그대로 적용되는 것을 말한다. 상속을 이용하면 나중에 스타일을 바꿔야 할 때 부모요소를 따르는 요소들은 한번에 바꿀 수 있어 편리하다는 장점이 있다. 단, 모든 속성들이 그런것은 아니고 상속되는 속성들이 정해져있다. 상속되는 속성들은 다음과 같다 : visibility opacity font color inline-height text-align 나머지 margin, width, height, padding 같은 속성들은 상속이 되지 않고 따로 적용시켜 줘야 한다. 하지만 inherit 키워드를 사용하면 나머지 요소들을 상속기능을 사용할 수 있다. p { margin: inherit padding: inherit border: inherit }

float 은 css 에서 가로요소를 정렬할 때 사용한다. 보통은 flex 를 사용하면 되지만 혹시나 flex 를 지원하지 않는 IE 를 고려해야 한다면 이때는 float 을 사용해야 한다. float 은 원래 이미지와 글을 같이 쓰기 위해 만들어졌다. float : left 를 하면 좌측 상단에 이미지가 배치되고 옆에서부터 글이 써진다. float :right 도 마찬가지로 이미지가 우측 상단에 배치되고 옆에서부터 글을 쓸 수 있다. float 은 위와 같은 상황에서도 쓸 수 있지만 맨 처음에서 말했듯 가로요소를 정렬할 때도 사용한다. 하지만 몇몇 특정한 상황에서 float 때문에 다른 속성들이 제대로 적용되지 않는 경우가 생긴다. 1. 두 요소 중 한 요소에만 float 를 적용하면 두 요소 간 ma..

1. static (기본위치) static 은 디폴트값으로 기본위치를 나타낸다. 자식요소로써 존재할 경우에는 부모요소를 기준으로 위치한다. 중요한 점은 position:static 일 경우 top, left, right, bottom 같은 좌표속성들을 사용할 수 없다. 2. relative (상대위치) 상대적인 위치로써 동작자체는 static 과 거의 같다. 차이점이라면 relative 에서는 좌표속성(top, left, right, bottom)들을 사용할 수 있다. 3. absolute (절대위치) static 을 제외한 가장 가까운 부모요소(조상요소) 를 기준으로 좌표속성(top, left, right, bottom) 만큼 이동한다. 즉 부모요소는 relative, absolute, fixed 중 ..

1. block block 요소의 특징은 항상 새로운 라인에서 시작한다.(마치 위에서부터 블럭을 쌓듯이) 넓이의 디폴트값이 항상 최대값이다. 넓이를 따로 설정하지 않으면 옆으로 끝까지 늘어난다. inline 요소를 포함할 수 있다. margin, padding, width, height 등 속성을 적용할 수 있다. block 요소들로는 div, h1~h6, p, ol, ul, li, form, hr, table 이 있다. 2. inline inline 요소의 특징은 새로운 라인에서 시작하지 않는다. 다른 요소와 함께 한 줄에 위치한다. content 의 크기만큼 너비를 차지한다. block 요소를 포함할 수 없다. 보통 block 안에 inline 을 담아서 사용한다. width, height, marg..

border-radius 는 모서리의 굴곡을 표현할 때 사용한다. border-radius 를 사용하면 원, 타원 등 다양한 모양도 만들 수 있다. border-radius 는 각각의 모서리에 대하여 다르게 속성을 적용할 수 있다 .border { border-radius: 10px 40px 40px 10px; } 또는 하나의 모서리에만 적용할 수도 있다. .border { border-top-left-radius: 50px 25px; } 이 경우는 위쪽-왼쪽 모서리에만 적용한 경우다. 추가적으로 border 속성은 border-style(테두리 종류), border-color(테두리 색), border-width(테두리 너비) 를 한번에 쓸 수 있다.

css 에서 대표적인 프로퍼티 단위로는 px, %, em 등이 있다. px 은 절대값이다. 변하지 않는다. 하지만 %, em 은 상대값이다. 환경에 따라 값이 변한다. 1. % %는 백분율단위다. 요소에 설정된 값(상속된 값이나 디폴트 값)의 상대적인 값을 나타낸다. 2. em em은 배수 단위다. %와 마찬가지로 요소의 기준에 따라 상대적인 값을 나타낸다. 1em 은 현재값이고, 2em 은 값의 두배이다. 기준은 현재 있는 요소나 상속받은 요소의 font-size 이다. 주의할 점은 %와 em을 여러번 상속해서 사용했을 때, 그들의 값이 여러번 상속받아 불규칙하게 변할 수 있다는 것이다. 그래서 rem 을 쓰는 경우도 있다. 3. rem rem 의 r 은 root 라는 의미를 갖고 있다. 이는 rem ..

CSS에서는 어떤 HTML 요소에 스타일을 적용할 지 선택해야 한다. 이때 선택자(selector)를 이용한다. 1. 전체 선택자 * 선택자를 통해 HTML 문서 내 모든 요소를 선택할 수 있다. 2. 태그 선택자 원하는 태그를 적은 뒤 스타일을 적용할 수 있다. p { color : red } 3. id, class 선택자 id 는 #id 로 선택할 수 있고, class 는 .class 으로 선택할 수 있다. paragraph 1 paragraph 2 paragraph 3 4. 어트리뷰트 선택자 해당 요소가 특정 속성을 갖고 있다면 이용할 수 있다. 셀렉터[어트리뷰트] 형식으로 사용하면 된다. poiemaweb.com a 요소 중 href 속성을 갖고 있는 요소를 선택함. 어트리뷰트 선택자는 종류가 많..

css는 html 요소에 스타일을 적용시킬 수 있는 언어이다. HTML5 이전에는 html에서 어느정도의 스타일 구현이 가능했지만, HTML5 로 오면서 html 은 구조, css 는 스타일 이라는 역할이 명확히 구분되었다. 1. 스타일 적용방법 요소에 스타일을 적용하려면 일단 그 요소를 가져와야 한다. html 요소에 class나 id가 지정했다면 css로 가져와 스타일을 적용할 수 있다. body { background : red; } body를 선택자(selector), background를 프로퍼티(property), red를 값(value) 라고 한다. 2. Reset CSS 모든 웹 브라우저는 각각의 디폴트스타일을 갖고 있다. 하지만 각자만의 디폴트 스타일을 갖고 있기 때문에 지원하는 tag나..