개념 창고/HTML & CSS

[CSS] id 속성과 class 속성의 차이?

한줄로 정리하면ID는 한 요소에만 사용이 가능하고,CLASS는 여러 요소에 중복 사용이 가능합니다.고유하게 전체 페이지에서 단 한가지에만 적용이 목적이라면구분이 가능하지만, 반복이 불가능한 ID를 사용할 수 있고, 중복으로 전체 페이지에서 반복적으로 적용이 목적이라면구분이 가능하지만, 반복이 가능한 CLASS를 사용하면 됩니다.CLASS는 반복적으로 쓰이는 유형들을 동일한 CLASS로 분류하여편하게 관리할 수 있습니다.  CSS에서의 사용법CSS에서 사용하기 위해서는#id.class형식으로 사용하면 됩니다.id 속성은 유일하기 때문에 클래스보다 우선적으로 적용됩니다.표로 정리합니다.idclass# 으로 선택. 으로 선택한 문서에 단 하나의 요소에만 적용동일한 값을 갖는 요소가 많음특정 요소에 이름을 붙일..

CSS 기본 선택자

기본 선택자 종류 * (전체 선택자(Universal Selector)) : 모든 요소를 선택 * { color: green; } 태그 선택자(Type Selector) : 태그 이름이 요소 00 선택 00 { color: green; } 클래스 선택자(Class Selector) : HTML Class 속성의 값이 xx인 요소 선택 .xx { color: green; } 아이디 선택자(ID Selector) : HTML id 속성의 값이 xx인 요소 선택. #xx { color: green; }

CSS 선언 방식

1. 내장 방식 : 의 내용(Contents)로 스타일을 작성하는 방식. 2. 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음) 유지 보수 측면에서 안좋아 비추천, 스타일 바꿀 때 CSS가서 바꾸는게 좋음. 3. 링크 방식 : 로 외부 CSS 문서를 가져와서 연결하는 방식. 병렬 방식으로 볼 수 있음. main.css 파일의 내용 div { color: green; margin: 50px; } 4. @import 방식 : CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식. 직렬 방식으로 볼 수 있고, 연결이 지연됨. main.css 파일의 내용 @import url("./box.css"); div { color: green;..

CSS 정의 및 기본 문법

CSS(Cascading Style Sheets, 종속형 스타일 시트) 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어로, 브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 표현함. 하나의 스타일 선언은 속성과 그 값으로 이루어져 있음. 선택자{ 속성 : 값; } ※ 선택자 : 스타일(CSS)를 적용할 대상(Selector) ※ 속성 : 스타일(CSS)의 종류(Property) div { color : red; } color은 글자색의 속성이고, red는 색상의 값임. div 의 색상을 레드로 하라는 의미. div { margin: 20px; } margin은 요소 외부의 여백이며, 20px는 값임. div 요소 외부 여백을 20픽셀로 하라는 의미. 인지하기 좋게 보통 아래와 같이 배치. ..

HTML 전역 속성

HTML 전체 영역에서 사용할 수 있는 태그 body 전체 영역에서 사용 가능함. 1. 요소의 정보나 설명을 지정 2. 요소에 적용할 스타일(CSS)을 지정 3. 요소를 지칭하는 중복 가능한 이름 4. 요소를 지칭하는 고유한 이름 5. 요소에 데이터를 지정

HTML의 주석처리

주석 : 수정사항이나 설명 등을 작성하는 것으로 브라우저는 이 태그를 해석하지 않기 때문에, 코드 위에 있어도 화면에 내용이 표시되지 않음. 식으로 하며, 영역 선택 후 윈도우 기준 Ctrl+/ 맥 기준 Cmd+/ 로 가능하다. ※ CSS의 주석처리는 /* */ 지만 단축키는 대부분 같으니 단축키만 알아도 된다.

HTML 자주 사용하는 태그2

1. 인라인(글자) 요소 특별한 의미가 없는 구분을 위한 요소 2. (Break, 인라인(글자) 요소) 줄바꿈 요소. 3. 인라인(글자) 요소, 블록(상자) 요소 사용자가 데이터를 입력하는 요소. type : 입력받을 데이터의 타입. 여기서 데이터 text 타입에 value="안녕하세요" /> 를 입력시 미리 칸에 입력되어있음. placeholder="이름를 입력하세요" /> 를 입력시 미리 칸에 표시되나 사용자가 활성화시키면 사라짐. 데이터 힌트를 줄 때 사용 ex) 생년월일을 입력하세요! , 번호를 입력하세요!(-제외) disabled /> 를 입력시 입력 요소가 비활성화됨. 여기서 데이터 checkbox 타입에 여기서 checkbox" /> 포도 여기서 checkbox" /> 딸기 하게되면 체크 박..

HTML 자주 사용하는 태그 요소

1. (Division, 블록(상자) 요소) 특별한 의미가 없이, 그저 구분을 위한 요소라 자주 사용 2. (Heading, 블록(상자) 요소) 제목을 의미하는 요소. 1 ~ 6번까지 있다. 3. (Paragraph, 블록(상자) 요소) 문장을 의미하는 요소. 1번 div로 대체 가능하나, p태그가 갖는 특성으로 좀 더 직관성이 생김. 4. (image, 인라인(글자) 요소) 이미지를 삽입하는 요소. 필수 속성인 src과 alt는 각각 src : 삽입할 이미지의 경로(source) alt : 삽입할 이미지의 이름(alternate) 5. (Unordered List, 블록(상자) 요소) 순서가 필요없는 목록의 집합. ※ 순서필요시 태그 활용, 사용 빈도 적음 ul 태그의 자식으로는 li 태그가 한개이상나..

HTML 글자와 상자

내용(컨텐츠, 요소)이 화면에 출력되는 특성 2가지 1. 인라인(inline) 요소 : 글자를 만들기 위한 요소들 2. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들 1번의 인라인(inlone)의 대표적인 태그는 이 있음. 본질적으로 아무 것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도임. 인라인 요소는 보통 수평으로 쌓인다. 줄어들려는 성질을 가짐. hi bob 출력 화면은 hi bob 으로 띄어쓰기가 된 상태로 나옴. 단을 내리는 것 자체가 띄어쓰기로 확인되기 때문이며, 단을 안내리면 띄어쓰기가 안된다. - 불가 - 가능 이유는 span은 인라인(글자) 요소인데, div는 상자(블록) 요소이기 때문이다. 2번 블록(Block)의 대표적인 태그는 이 있음. 본질적으로 아무 것도 나타..

HTML 빈태그

vs 는 편리하고, HTML 1/2/3/4/5 에서 사용 / 열리는 태그로 착각할 수 있다. 는 안전하고, XHTML/HTML5 에서 사용 빈태그의 예시로 태그는 줄바꿈을 주는 기능을 하는 태그로, 빈태그임. 이미지를 불러오는 태그로, 닫는 태그가 없음. 대신 src를 써야한다.

HTML 부모와 자식 요소

내용 위와 같은 내용에서 태그1에게 태그2는 자식이고, 태그 2, 3은 결국 태그 1의 후손이다. 태그1에 속한다고 볼 수 있음. 종속되는 관계이다.

HTML 기본 문법

기본 문법은 아래와 같다. 내용 Hello → 열린(시작) 태그 내용 → 들어가는 요소 → 종료(닫힌) 태그 이 때 내용은 요소(Element)와 컨텐츠(contents)와 유사함.