본문 바로가기

전체 글

 (92)
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - CSS 고급 선택자 연결 선택자 하위 선택자: container 안에 있는 모든 p 태그 #container p 자식 선택자: container의 자식 요소인 p태그에만 적용 #container > p #container > div > p 형제 선택자: h1 다음에 오는 형제 요소들 중 모든 p태그에 적용 h1 ~ p 인접 형제 선택자: 바로 다음에 있는 형제 p태그에만 적용 h1 + p 속성 선택자 href 속성이 있는 a태그에만 적용 li a[href] href 값이 #인 a태그에만 적용 li a[href="#"] { cursor:default; } 가상 클래스와 가상 요소 가상 클래스 링크에 사용 가능한 가상 클래스 :link :visited - 방문했던 링크 :hover - 마우스를 올렸을 경우 :active - 마..
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 이미지와 그라데이션 효과로 배경 꾸미기 Background background-color: 배경색 지정. 색상명, RGB, HSL, 16진수 모두 사용 가능. background-image: 배경 이미지 적용. 웹 브라우저에 가득 차도록 가로 세로로 계속 반복해서 보여줌. ex) url('image/bg1.jpg'); background-repeat: 반복 여부 지정. ex) no-repeat, repeat-x, repeat-y, repeat; background-position: 이미지 위치 변경. ex) bottom, center... background-attachment: 고정시킬 때 자주 사용 ex) fixed background: 위에 4가지 속성을 묶어서 표현 가능. 속성 값의 순서는 상관없음. background: url('im..
[동영상 강의] Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 레이아웃을 구성하는 CSS 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록 레벨 요소 한 줄을 다 차지 p 태그 인라인 레벨 요소 필요한 영역만큼만 차지 span 태그 박스 모델 실제 콘텐츠 영역, 패딩, 박스의 테두리, 마진의 요소로 구성됨. 개발자 도구의 computed 탭에서 확인 가능 박스 모델의 4개의 방향 값을 한 번에 지정할 때는 방향 순서를 지켜야 함(top -> right -> bottom -> left) 콘텐츠 영역 실제 내용이 들어가는 영역 크기는 width와 height로 지정 box-sizing 속성 박스 모델의 전체 너비 값은 콘텐츠 영역만이 아니라 패딩, 테두리 너비에 의해 영향을 받게 됨 그래서 나온 속성 border-box: 테두리와 패딩을 포함해서 너비를 정해줌 계산이 더 편리해짐 테두리 스타일 지정하기 ..
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 텍스트 스타일, 리스트 스타일, 표 스타일 텍스트 스타일 text-align 속성: 텍스트 정렬 방법 지정, center, right 등 사용 가능 line-height 속성: 줄 간격 조절, px, em, %, 배수로 조정 가능. 주로 1.5배나 2배를 사용(150%, 200%) line-height: 1.5; // 2.0, 150%, 200% text-decoration: 링크에 밑줄을 없앨 때 주로 사용 underline: 밑줄 line-through: 취소선 text-decoration: none; text-shadow: 텍스트에 그림자 추가 가로 세로 번지는 정도 색상 text-shadow:5px 5px 3px #222 리스트 스타일 list-style-type 또는 list-style: list 앞에 어떤 기호(블릿)를 표시할 것인지 ..
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - CSS기본 선택자, 캐스케이딩 스타일 시트 CSS 스타일과 스타일 시트 스타일 시트: 여러 개의 스타일을 모아 놓은 것 스타일 종류 브라우저 기본 스타일 인라인 스타일 내부 스타일 시트 외부 스타일 시트 CSS 기본 선택자 전체 선택자 브라우저 기본 스타일을 초기화할 때 많이 사용 💡  * { margin: 0; padding: 0; } 타입(태그) 선택자 p { color: blue; } class 선택자 문서 안에서 여러번 사용. 앞에 마침표를 사용 .redtext { color: red; } id 선택자 문서 안에서 한 번만 사용 가능하기 때문에 고유성을 가짐. #container { border:1px solid #222; padding:10px; } 그룹 선택자 선택자를 그룹으로 묶어서 나타낼 수 있다. h1, p { color: bl..

티스토리툴바