프론트엔드 프로그래밍/CSS
-
반응형 웹 (가변 그리드, 미디어 쿼리, 뷰 포트, 플렉서블 박스)프론트엔드 프로그래밍/CSS 2022. 1. 26. 16:46
반응형 웹 PC, TV, 내비게이션, 스마트 기기 등 다양한 기기의 화면이나 환경에 맞게 자유자재로 변하도록 만들어진 웹 반응형 웹의 장점 - 유지보수 간편 - 마케팅에 유리 - 비용면에서 효과적 - 검색 엔진 최적화 - 미래지향적(현재) 기술 유지보수 간편 - 모바일 버전과 데스크 탑 버전 두개의 웹사이트를 만들게 되면 - 웹 사이트 수정/갱신할 때 모바일 버전과 데스크탑 버전을 개별적으로 수정해야 하므로 업무량이 늘어나고 작업 내용도 복잡 - 그러나 모바일 버전, 태블릿 버전, 데스크탑 버전 등 모든 디자인을 하나의 HTML과 CSS 파일에서 작업하기 때문에 유지보수 용이 마케팅에 유리 - 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경해서 보여줄 수 있기 때문에 확실하게 내용 전달 가능 비용면..
-
CSS 연습문제프론트엔드 프로그래밍/CSS 2022. 1. 26. 16:28
CSS 파일로 HTML 문서 외부에 정의 (1) CSS 파일 인코딩 : UTF-8 설정 - Window / Preferences / Web / CSS Files 선택하고 - 오른쪽 Encoding: ISO 10646/Unicode(UTF-8) 선택 - [Apply and Close] (2) CSS 파일 생성 (3) HTML : CSS 연습문제 - cssEx.html - cssEx.css - 메뉴 항목에 마우스 올렸을 때 글자색 빨간색, 밑줄 표시 - text-decoration:none; /* 밑줄 없애기 */ - text-decoration:underline; /* 밑줄 표시 */ - [공지사항]과 [커뮤니티] 각 항목에 마우스 올렸을 때 빨간색 @charset "UTF-8"; #wrap { margi..
-
자식 / 자손 선택자 (상속 선택자) + 효과(스크롤, 투명도, 그림자)프론트엔드 프로그래밍/CSS 2022. 1. 26. 16:18
자식/자손의 개념 자식 선택자 : > 부호 사용 - 선택자 > 자식 선택자 - 선택자A > 선택자B - #header > h1 자손(후손) 선택자 : 띄어 쓰기 (스페이스) - 선택자 자손선택자 - 선택자A 선택자B - #header h1 - #pageNav ul li a:hover first-child 선택자 - 첫 번째 자손 선택 : .wrap div:first-child - 두 번째 자손 선택 : .wrap div:first-child + div 또는 nth-child(숫자) - .wrap div:nth-child(1) - .wrap div:nth-child(2) - .wrap div:nth-child(3) first-child 선택자 예제 : first-child.html nth-child 사용 ..
-
CSS 속성 선택자프론트엔드 프로그래밍/CSS 2022. 1. 26. 15:48
CSS 속성 - 텍스트 속성 - 배경 색상 / 이미지 관련 속성 - 테두리 속성 - 여백 속성 - display 속성 : inline / block / inline-block - float 속성 - 목록 관련 속성 - 위치 관련 속성 - 겹침 (레이어) - overflow - visibility / opacity - 그림자 텍스트 속성 배경색 배경 이미지 / 반복 테두리 유형 / 굵기 / 색상 지정 여백 속성 (padding / margin) inline과 block display에서 inline과 block의 차이 block - 행으로 배치 - 옆으로 나란히 배치 안 됨 - 여백 있음 - display 속성이 없으면 디폴트 inline - 옆으로 나란히 배치 - 여백 없이 내용물 만큼만 공간 차지 in..
-
CSS의 기본 형식 + 선택자(태그, 아이디, 클래스)프론트엔드 프로그래밍/CSS 2022. 1. 26. 15:31
스타일 시트의 기본 형식 - 선택자 (selector) - 스타일을 적용할 대상 - HTML 문서의 태그, 아이디, 클래스, 속성 - {속성명:값;} - 변경하고자 하는 속성 - 클꼴, 크기 색상 등 - 사용 예 - 모든 태그에 스타일 적용 - h1 { color:red; } 선택자 유형 (1) 태그 선택자 (2) 아이디 선택자 (3) 클래스 선택자 (4) 속성 선택자 (5) 상태 선택자 (1) 태그 선택자 - 태그명 사용 - 요소 (element) 선택자라고도 함 - HTML 문서에 있는 같은 모든 태그에 동일하게 적용 - 태그명 { 속성명:값; } 태그 선택자 예제 : tagSelector.html h3 { background-color:#000; color:#fff; width:50%; /* 가로 ..
-
CSS (스타일 시트)란?프론트엔드 프로그래밍/CSS 2022. 1. 26. 15:15
스타일 시트 (CSS) - Cascading Style Sheets : 계단형 스타일 시트 - 단계적으로 스타일 적용 - 여러 스타일이 겹치면 맨 마지막 스타일 적용 - HTML의 레이아웃 배치 등의 한계를 보완하기 위해 개발된 독립 언어 - 일정 기능들을 미리 지정하여 여러 부분에서 동일하게 적용 가능한 작업 - HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 지정 - 정렬 방식, 그림자, 동적인 기능 다양한 효과 스타일 시트 장점 - 자유롭게 웹 문서 편집 - 원하는 형태로 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 자유롭게 편집 - 통일감 있는 문서 작성 - 한 번만 정의하여 문서에 일관되게 적용 가능 - 편리한 문서 관리 -..