1. float 속성웹 요소를 문서 위에 떠 있게 (배치되게) 만든다- left : 해당 요소를 왼쪽으로 배치- right : 요소를 오른쪽으로 배치- none : 기본값. 왼쪽도 오른쪽도 X- float 종료 -> {clear: both} ​​2. 요소 정렬 1) 수평 정렬 (가로로 가운데 정렬) - Block tag의 경우: {margin : 0px auto;}- Inline Tag의 경우: {padding: 좌우 패딩값을 통일;}- Text의 경우: text-align2) 수직 정렬 (세로로 가운데 정렬) - 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: 테이블 태그에서 사용하는 속성으로 테이블의 행과 열을 숨김 ​3. opa..

​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요소와 요소 사이의 간격 (박스와 박스 사이의 간격)- 마진 적용 순서: T..

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

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

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에 위치한 컨텐츠​