전체 글 썸네일형 리스트형 css 박스 모델 속성 ! 1. width, height width 요소의 가로 너비를 지정한다. height 요소의 세로 너비를 지정한다. 2. max-width, min-width, max-height, min-height max-width 요소의 최대 가로 너비를 지정 min-width 요소의 최소 가로 너비를 지정 max-height 요소의 최대 세로 너비를 지정 min-height 요소의 최소 세로 너비를 지정 3. margin margin 요소의 외부 여백을 지정하는 속성이고 단축 속성이다! ex) margin: 10px; 위 아래 좌우 모두 10px의 외부 여백 margin: 10px 20px; 위아래 10px, 좌우 20px의 외부 여백 margin: 10px 20px 30px; 위 10px, 좌우 20px, 아래 .. 더보기 css의 중요한 단위 ! 1. px 화면에 표시되는 최소 단위이며 고정적인 단위다. 2. % 부모요소의 영향을 받는 단위다 가로 너비가 600px인 태그안에 자식요소인 태그의 가로 너비를 width: 50%; 로 설정하면 자식요소인 태그의 가로 넓이는 300px이 된다. 3. em, rem em은 자기 자신의 font-size의 영향을 받는 단위다. ex) 태그의 font-size가 10px 일 경우 width: 30em; 을 하면 가로너비가 300px이 된다. rem은 가장 상위요소의 font-size의 영향을 받는 단위다. ex) 가장 상위요소인 태그의 font-size 가 10px일 경우 20rem은 200px의 크기를 가진다. 4. vw, vh vw는 화면 전체인 viewport 의 가로너비를 비율로 사용하여 표시하는 단.. 더보기 css 상속과 우선순위 ! 1. 상속이란? 상위요소에 특정한 css속성을 적용 했을때에 하위요소들에게도 적용되는 현상! hello hi good bye world 2. 상속되는 속성들 font 관련 속성들, color, text-align, text-indent, text-decoration, letter-spacing, opacity 등... 글자를 다루는 속성들이 주로 적용된다. 3. 강제 상속 상속이 되지 않는 부모요소의 속성을 강제로 상속시킨다. .container { position: absolute; } .box { position: inherit; } 위처럼 자식요소의 속성 값에 inherit 를 입력하면 부모요소의 값이 강제상속이 된다. 4. 우선순위 hello * { color: blue; } body { colo.. 더보기 css의 선택자의 종류 ! 1. 기본 선택자 전체를 선택해주는 * {} tag를 선택해주는 태그명 {} class를 선택해주는 .클래스명{} id를 선택해주는 #아이디명 {} 2. 복합 선택자 일치 선택자 ex) div.container {} => 태그이면서 class 속성이 container 인 요소를 찾아준다. 자식 선택자 ex) ul> li {} => 태그의 자식 요소인 태그를 찾아준다. 후손 선택자 ex) div li {} => 태그의 후손 요소인 태그를 찾아준다. (자식도 후손에 포함이 된다) 인접 형제 선택자 ex) div+.container {} => 태그의 다음 형제 요소 중에 class 속성이 container 인 요소중 가장 인접해있는 요소를 찾아준다. 일반 형제 선택자 ex) div~.container {} =.. 더보기 css의 기본! 1. 문법 css의 문법은 간단하다. 선택자 { 속성: 값; 속성: 값; } /* ex */ hello world div { color: red; font-size: 20px; border: 1px solid blue; } 가독성이 좋게 이런 식으로 작성해주면 된다. 2. 선언방식 inline 방식 위처럼 태그 내에 직접적으로 스타일 속성을 사용해서 넣어주는 방식으로 유지보수하기가 까다롭기 때문에 사용시 주의가 필요하다! 내장방식 hello world 위처럼 태그를 사용해서 외부에 있는 css 파일을 직접적으로 연결해주는 방식 @import 방식 @import url("경로") css 파일내부에서 다른 css 파일을 가져와서 연결한다. 더보기 모든 Tag에서 사용가능한 전역속성에 대해 알아보자! 1. class 속성과 id 속성! class 속성은 태그의 별칭을 지정해줘서 css 나 javascript 에서 활용하기 용이하게 해 준다. id 속성은 class 속성과 비슷하나 문서 내 고유해야 하므로 같은 id 값은 두 개 이상 존재해선 안된다. 2. style 태그에 직접적으로 적용할 css를 선언해준다. 3. title 속성! 태그의 정보나 설명을 지정해줄 수 있다. 태그에 마우스를 올리고 있을 시 하단에 나오는 정보 4. tabindex Tap 키를 사용했을 때 요소를 순차적으로 탐색할 순서를 지정해준다. 대화형 콘텐츠(input , button, textarea 등...) 들에는 기본적으로 tabindex 가 0으로 설정되어있다 값으로 -1 을 입력하면 탭 순서에서 제외가 가능하다! 더보기 html의 양식을 만드는 Tag 들 ! 1. 태그는 웹 서버에 정보를 제출하기 위해 필요한 여러 양식의 범위를 지정한다. 태그 내부에는 또 다른 태그가 들어갈 수 없다. 태그의 속성 action 속성은 값으로 전송한 정보를 처리할 웹페이지의 경로를 입력해준다. autocomplete 속성은 이전에 양식에 입력한 값으로 자동 완성 기능을 사용할 것 인지 아닌지 정해준다 값으로는 on/off 기본 값은 on 이다. method 속성은 서버로 전송할 HTTP 방식을 설정해준다. 값으로는 GET과 POST 가 있으며 기본값은 GET이다. GET 방식은 입력한 정보가 URL 주소에 담겨서 전송됨. POST 방식은 입력한 정보가 URL 주소에 노출되진 않는다. 일반적으로 많이 사용된다. name 속성은 전송될 양식이 어떤 것인지를 값으로 입력해 줄 수 .. 더보기 웹을 더욱 풍성하게 해줄 멀티미디어 관련 Tag 들 ! 1. 태그는 이미지를 삽입할 수 있게 해주는 태그이며 빈 태그이다. 필수 속성으로는 삽입하려는 이미지의 경로를 지정해주는 src 속성과 이미지가 제대로 출력이 되지 않는 상활일 때에 대체 텍스트를 띄워주는 alt 속성이 있다. 이외의 속성으로는 이미지의 넓이를 설정 할 수 있는 width와 height 속성이 있으며 둘중 하나의 속성에만 값을 주어도 이미지가 기본비율에 맞게 변화한다. 그리고 srcset 속성은 뷰포트의 크기가 변화했을 때 변화된 크기에 최적화된 이미지를 사용하도록 값으로 사용될 이미지들의 경로와 이미지의 원본크기를 지정해주고 작은 크기의 이미지부터 입력하며 이미지의 크기는 px 단위가 아닌 w(가로너비) 나 x(비율을 의미하지만 일반적으로 w를 많이 사용함) 단위로 입력해야 한다. 작은.. 더보기 이전 1 2 3 4 5 다음