1. float 속성 웹 요소를 문서 위에 떠 있게 (배치되게) 만든다 - left : 해당 요소를 왼쪽으로 배치 - right : 요소를 오른쪽으로 배치 - none : 기본값. 왼쪽도 오른쪽도 X - float 종료 -> {clear: both} ​ ​ 2. 요소 정렬 1) 수평 정렬 (가로로 가운데 정렬) - Block tag의 경우: {margin : 0px auto;} - Inline Tag의 경우: {padding: 좌우 패딩값을 통일;} - Text의 경우: text-align 2) 수직 정렬 (세로로 가운데 정렬) - Inline Tag의 경우: {padding: 상하 패딩값을 통일;} - line-height : 수치를 텍스트 태그의 높이와 일치시킴 ​ ​ 3. position 속성 웹 ..

1. display 속성 요소가 화면에 보이는 방식을 지정하는 속성 (요소의 속성을 변경시킴) - inline: 태그를 인라인 형식으로 지정 (contents의 크기만큼 자리 차지), margin 적용 불가 - block: 태그를 블록 형식으로 지정 (contents가 있는 한 줄 전체 차지), 크기 지정, margin 적용 가능 - inline-block: inline 속성과 block 속성을 모두 가짐 - none: 화면에 출력 X, 공간 X (없는 태그 처럼 취급) ​ 2. visibility 속성 요소가 화면에 보이게 할지 말지를 지정하는 속성 - visible: 화면에 보임 - hidden: 화면에서 안보이게 함 - collapse: 테이블 태그에서 사용하는 속성으로 테이블의 행과 열을 숨김 ​..

​ 1. width와 height 컨텐츠의 가로, 세로 크기 지정 ​ 2. border : 테두리 속성 - Top, Left, Bottom, Right - 선의 두께(border-width), 형태(border-style), 색상(border-color) 지정 가능. 위의 속성을 순서대로 한번에 지정하는 것도 가능하다. 예) border: 1px solid black; - border-radius : 테두리에 둥근 사각형이나 원을 표현하는 속성 - table의 border 속성들 > border-spacing : 테두리 간의 간격 > border-collapse : 선 분할 여부 (seperate, collapse) ​ 3. margin 요소와 요소 사이의 간격 (박스와 박스 사이의 간격) - 마진 적용..

1. 기본 선택자 (중요) * 전체 선택자 HTML 문서 안의 모든 데이터 선택 * {color: red;} 태그명 태그 선택자 HTML 문서 내부의 특정 태그를 모두 선택 h1{color: blue;} #아이디명 id 선택자 특정 id 속성이 있는 태그를 선택 #t1{color:yellow;} .클래스명 class 선택자 특정 클래스 속성이 있는 태그를 선택 .c1{color:pink;} - 선택자 적용 순서: 먼저 body를 지나면서 태그들에 지정된 속성을 적용 -> 나머지에 전체 선택자의 속성 적용 - 아이디 선택자: 웹페이지 내부에서 중복되면 안됨. 특정한 하나의 태그를 선택할 때 사용 - 클래스 선택자: 하나의 class로 여러 태그를 묶는데 사용한다. class 중복 가능 - 태그 선택자와 클..

1. CSS란? - Cascading Style Sheet - 디자인을 위한 언어 HTML은 정보, CSS는 디자인에 집중하기 위해 언어를 따로 독립시킴 - CSS는 HTML과 독립된 언어이지만 HTML 없이 사용할 수 없다 ​ 2. HTML문서에 CSS를 사용하는 방법 1) 내부 스타일 시트 사용 - CSS 시작! ​ 2) 외부 스타일 시트 사용 - 태그 내에 외부 css파일 가져오는 코드 작성 - - 여러 웹문서에서 사용할 스타일을 별도 파일(.css)로 저장해놓고 필요할 때 마다 파일에서 가져와 사용 - 주로 외부 스타일 시트를 사용하여 작업한다 ​ 3) 인라인 스타일 - 스타일을 적용하고 싶은 태그에 style 속성을 직접 사용 - style="속성: 속성값;" ​ 3. CSS 기본 문법 1) 기..

1. 공간 분할 태그 (layout) 하나의 화면에서 다양한 기능을 사용하기 위해 공간을 분할 1) div 태그 : 블록 형식으로 공간을 분할, 데이터가 있는 한 줄 전체가 선택됨 2) span 태그: 인라인 형식으로 공간을 분할, 데이터가 있는 딱 그 부분만 선택됨 ​ 2. 시맨틱 태그 (semantic) 1) header 태그: 웹페이지의 전체를 설명하는 header임을 표현 2) footer 태그: 웹페이지의 바닥부분 footer임을 표현 3) nav : 웹페이지를 탐색하는 네비게이션 역할을 하는 navigator 정보임을 표현 4) section : Content의 묶음, 여러 중심 내용을 감싸는 공간 5) article : 각각의 컨텐츠 6) aside : side에 위치한 컨텐츠 ​