전체 글49 CSS-선택자(selector) 선택자(selector) : style을 적용하고자 하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일 정의 selector 패턴 설명 전체 셀렉터 * 페이지의 모든 요소 선택 type 셀렉터 태그명 지정된 태그명 요소 선택 ID 셀렉터 #(id명) id를 이용해 요소에 이름을 부여하여 선택 (id명은 중복 X) class 셀렉터 .(class명) class를 이용해 요소에 이름을 부여하여 선택 (class명은 중복 O) 후손(하위) 셀렉터 공백 요소 내부에 있는 모든 해당 요소 선택 (공백) 자식 셀렉터 > 요소 내부에 있는 자식 요소만 선택 (후손 X) 인접 셀렉터 + 현재 요소의 바로 뒤에 나오는 요소만 선택 형제 셀렉터 ~ 현재 요소와 같은 계층(형제)에 있는 요소만 선택 (자식, 후손 .. 2020. 8. 6. CSS란? 1.CSS란? CSS(Cascading Style Sheets) : 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일 시트 - HTML의 각 요소에 style을 정의하여 화면 등에 어떻게 렌더링 하면 되는지 브라우저에게 설명하기 위한 언어 2.CSS 선언 - 셀렉터(Selector) : 어느 부분에 style을 줄지 선택 - 프로퍼티(Property) : 요소를 선택하고 {}내에 property(속성)와 값을 지정하여 style을 정의 - 값(value) : property를 특정 단위로 지정 ("키워드", "크기 단위", "색상 표현 단위" 등) 3. HTML과 CSS의 연동 - Link style : 외부 스타일 시트. 가장 많이 사용되며 태그를 이용해 css파일을 불러온다. Hello CSS lin.. 2020. 8. 6. HTML5 블록 레벨 요소 / 인라인 요소 블록 레벨 요소 (Block-level) 인라인 요소(Inline) 줄 바꿈 현상 (새로운 줄에서 시작하고, 좌우 양쪽으로 너비 차지) 줄 바꿈 현상 X (새로운 줄을 만들지 않으며 필요한 너비만 차지) 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있다. 때때로 다른 블록 레벨 요소를 자식 요소에 포함할 수 있다. 블록 레벨 요소를 자식 요소에 포함할 수 없다. 1. 블록 레벨 요소 - 블록 레벨 요소의 종류 (기본값이 블록 레벨 요소의 목록) 연락처 정보 필드 집합의 라벨 문서에서 하나 뿐인 중심 콘텐츠 단락 콘텐츠 그림 설명 탐색 링크 포함(내비게이션) 부가 콘텐츠 미디어 콘텐츠 그룹과 설명 순서 있는 목록 긴("블록") 인용구 (들여쓰기) 페이지나 구역의 푸터 문단 상세 정보 위젯 입력 폼.. 2020. 8. 4. HTML5 Tag-[구조 관련 요소] 레이아웃 구성(시맨틱태그) 웹페이지의 레이아웃을 구성하기 위해서 공간을 분할한다. 공간을 분할할 수 있는 태그는 div, span, table 등이 있다. 과거에는 table 태그를 이용하여 레이아웃을 구성하기도 하였으나 반응형 웹이 시작되며 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 하지만 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE에서 작동하지 않기 때문에 주의가 필요하다. tag 의미 및 특징 header 헤더 영역 제목, 내비게이션, 검색 등의 내용을 포함 nav 메인 메뉴나 목차 등을 정의 내비게이션 section 맥락이 같은 요소들을 주제별로 그룹화 article의 그룹화에 많이 쓰임 article 본문의 주내용이 들어.. 2020. 8. 2. HTML5 Tag-div, span [그룹 요소] 1. div (Division) tag 의미 및 특징 div 요소들을 그룹으로 정의하는 태그 (블록 레벨 요소) CSS 적용을 쉽게하기 위해 그룹 설정 (웹사이트의 레이아웃을 만들 때 주로 사용 span 태그 span 태그는각 글자단위로 적용하기가 편리합니다. span 태그 span 태그는각 글자단위로 적용하기가 편리합니다. 2020. 8. 2. 이전 1 ··· 5 6 7 8 9 10 다음
