참좋은 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(테두리 너비) 를 한번에 쓸 수 있다.

1. form form 태그의 입력양식을 통해 사용자에게서 입력을 받아 커뮤니케이션 할 수 있다. form 의 속성으로는 action, method 가 있다. action 은 폼을 제출했을 때 어디로 이동할지 경로를 정하는 속성이다. method는 GET 방식와 POST 방식이 있다. GET 은 서버로부터 데이터를 받아오는 것이고, POST 는 서버에게 데이터를 주는 것이다. 이러한 입력양식을 모두 form 에서 속성으로 정할 수 있다. 2. input form 안에는 input 을 써서 폼이 구체적으로 어떤 입력들을 가질 것인지 작성할 수 있다. 위의 예는 type="button" 을 통해 버튼을 만든 것이다. 여러가지 속성들을 통해 다양한 입력들을 만들 수 있다. button : 버튼 checkbox..

1. 이미지 이미지를 나타내기 위해선 img 태그를 사용한다. img 태그에서 사용할 수 있는 속성들 : src : 파일경로 alt : 이미지가 없을 경우 사용할 글 그리고 width 값과 height 값도 설정할 수 있으나, css 에서 하는 걸 추천 2. 음악 audio 태그를 사용한다. audio 태그에서 사용하는 속성들 : src : 음악 경로 preload : 재생하기 전에 음악파일을 먼저 모두 받을 것인지 loop : 자동 반복 autoplay : 자동 재생 controls : 음악 재생 도구를 표시할지 3. 비디오 video 태그를 사용한다. video 태그의 속성들 : src : 동영상 경로 preload : 재생되기 전 파일을 모두 받을 것인지 poster : 동영상이 준비되는 동안 대표..

list 를 통해 목록을 나타낼 수 있다. 1. ul (Unordered list) : 순서가 없는 목록 Hello HTML list 이렇게 하면 출력으로 순서없는 목록이 나온다. Hello HTML list 2. ol (Ordered list) : 순서가 있는 목록 Hello HTML list ol 을 사용하면 리스트에 순서가 생긴다. 1.Hello 2.HTML 3. list 또한 이렇게 순서를 나타내는 방법을 ol 의 type 속성을 이용해 바꿀 수 있다. 종류는 type="1" : 숫자로 표기 type="A" : 대문자 알파벳 type="a" : 소문자 알파벳 type="I" : 대문자 로마숫자 type="i" : 소문자 로마숫자 또한 start 속성을 이용해 시작값을 정할 수 있다. Hello H..

하이퍼링크란 사용자가 다른 곳으로 이동할 수 있게 하는 있는 링크를 말한다. a 태그에서 href 속성을 이용해 사용한다. href 속성은 href="원하는 경로" 형식으로 작성한다. 여기서 경로를 작성할 때 알아야 할 것이 절대경로와 상대경로이다. 절대경로는 라우터의 맨 앞에 / 를 붙여 절대적인 위치를 알려주는 경로다. ex) /users/~~ 상대경로는 현재 파일이 기준이다. ./ 은 현재 파일의 위치에서 시작한다는 뜻이고 ../ 은 현재 파일의 부모 파일에서 시작한다는 뜻이다. ex) ./users/~~ , ../users/~~ href 에 사용할 수 있는 경로는 여러가지가 있다. 사이트 주소, 절대경로와 상대경로, id 를 이용한 이동 id 를 이용한 이동은 특정 요소에 id 가 있다면 href..