1. hover a태그 관련 알아둘 것 1) href 속성을 비워두면 jQuery가 작동하지 않는다. -> #none을 넣어주자 2) body의 색상 속성을 적용받지 않는다. 선택자:hover 위처럼 선택자 뒤에 가상클래스를 적어주면 되는데 선택자와 가상클래스 사이에 띄어쓰기가 있으면 안된다 공지사항 Q&A 커뮤니티 body { background-color: #fff; color: #333; font-size: 15px; } a { color: #333; text-decoration: none; font-weight: 700; transition: 0.3s; } a:hover { color: dodgerblue; text-decoration: underline; } hover는 해당 선택자에 마우스 커..
semantic : 의미론적인, 의미를 가지고 있는 HTML5 이전에 레이아웃을 구성할 때 div에 클래스를 부여하며 구성하였다. 이는 html파일이 길어지고 div를 계속 반복해서 사용해야한다. 그 이후 sementic태그의 등장으로 효율적이고 직관적으로 구성할 수 있게되었다 종류 container : 가장 상위 section : 주제별 컨텐츠 영역 header : 헤더 영역(로고, 메뉴 등) footer : 푸터(제작 정보 등) aricle : 컨텐츠 내용 nav : 문서 링크 탐색 main : 문서 주요 내용 지정 단계 container>section, header, footer>article>div 레이아웃 만들어보기(가상클래스 X) .container { border: 1px solid #000..
float 부모 요소 기준, 왼쪽 or 오른쪽 배치 지정 margin : auto : 가운데로! (※주의 : block요소만 적용가능!) 예시) .parent { border: 5px solid red; width: 600px; /*자식요소에 height값 지정해주면 자동으로 늘어나기 때문에 높이 따로 지정X*/ } .child { background-color: gold; width: 200px; height: 200px; } float 속성을 따로 주지 않은 상태이다. 왼쪽으로 배치 되어있는 것을 보고 "기본값이 float: left 인가?" 라고 생각할 수 있지만 그렇지 않다. 여기에 float: left를 설정하게 되면 부모 요소가 작아지는걸 확인할 수 있다. float: left를 넣어주면 자식..
1. 인라인(inline) 요소 한줄에 여러개 배치 기본 너비값 = 컨텐츠 width값 크기값을 가질 수 없음 (width, height가 먹히지 않음) 상-하 margin X (좌우 O) (text서식) 예시) 네이버 구글 다음 a { /*토막상식 : a태그는 유일하게 body의 컬러지정 따르지 않음*/ color: black; text-decoration: none; border: 1px solid red; } 인라인요소 중에 하나인 a태그이다. width와 height 값을 따로 지정하지 않고 border 속성을 주었을 때 content의 너비에 맞게 윤곽선이 생긴 것을 알 수 있다. (기본 너비값= 컨텐츠 width값) a { color: black; text-decoration: none; bo..
1. border border-style : 테두리 스타일 지정 value : solid dashed dotted double groove inset ouset boder-width : 테두리 두께 지정 px % 등 border-color : 테두리 색상 지정 color 값 한 방에 여러 속성 지정 .box { width: 400px; height: 400px; border-color: blue; border-width: 5px; border-style: solid; } border라는 속성을 한번에 묶어서 쓸 수 있다 .box { width: 400px; height: 400px; border : 1px solid blue; } border-bottom처럼 방향이 없으면 상하좌우 네면 모두 적용이되고,..
1. 문단, 텍스트 서식 h1~h6 제목 태그 p / br 문단 구분, 줄 바꿈 / br은 특별한 경우 아니면 쓰지 않는 것을 추천! b / strong 굵게 (strong은 시각장애인을 위한 html 작성 시에도 쓰임) u 밑줄 s / del 취소선 (del은 시각장애인을 위한 html 작성 시에도 쓰임) big / small 글자 크게, 작게 sup / sub 위 첨자, 아래 첨자 mark 형광펜 배경 글자 hr 수평선 2. 목록 순서가 있는 목록 : ol > li 1 2 3 4 순서가 없는 목록 : ul > li 1 2 3 4 중첩 시 자식 노드는 li 안으로 들어가야 한다 (Navigation bar 등을 만들 때 드롭다운을 하기 위해 필요) 방콕 쇼핑 리스트 방콕에서 반드시 들려야 할 베스트 씨..
1. CSS 선택자 1) HTML 선택자 특정한 HTML태그를 선택해서 직접 적용한다. 여기가 레드 여기가 블루 2) 전체 선택자 HTML 페이지 내부의 모든 태그를 선택한다. h1도 레드 p태그도 레드 3) ID 선택자 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. 이때 #을 써서 구분해 준다. CSS3 Selector Basic CSS3 Selector Basic CSS3 Selector Basic 4) CLASS 선택자 특정한 클래스의 여러 요소를 한 번에 선택할 때 사용한다. 이때 .을 써서 구분해 준다. Lorem ipsum 2. 속성 선택 문법 기호 속성 선택자는 특성한 속성을 가진 태그를 선택할 때 사용한다 기본 속성 선택자 : 특정한 속성의 존재 유무와 속성 값을 판별할 때 사..
