오봉이와 함께하는 개발 블로그

FrontEnd_day2 정리 (2021.12.03 금요일) CSS 파일로 HTML 문서 외부에 정의 CSS 파일 인코딩 UTF-8 CSS 파일 생성 HTML :

FrontEnd_day2 정리 (2021.12.03 금요일) CSS속성 텍스트속성 배경 색상 / 이미지 관련 속성 테두리 속성 여백 속성 display 속성 : inline / block / inline-block float 속성 목록 관련 속성 위치 관련 속성 겹침 (레이어) overflow visibility / opacity 그림자 텍스트 속성 font-family : "굴림", "맑은 고딕"; /* 1순위 2순위, ... */ font-size : 40px; color : blue; /* 글자색 */ font-style : italic; font-weight : bold; /* 굵게 */ text-decoration : underline; letter-spacing : 3px; /* 글자 사이 간..

FrontEnd_day2 정리 (2021.12.03 금요일) CSS 선택자 유형 태그 선택자 태그명 사용 요소(element) 선택자라고도 함 HTML문서에 있는 모든 같은 태그에 동일하게 적용 태그명 {속성명:값;} h3 { background-color:#000; color:#fff; width:50%; margin-left:20px; } 태그 선택자 사용하기 두부감자조림 재료 감자 1개 두부 1/2모 꽈리고추 10개 홍고추 1개 조리법 감자는 껍질을 벗기고 돌려가면서 어슷하게 썰어 찬물에 담가놓고 두부는 도톰하게 한입크기로 썰며 꽈리고추, 홍고추는 어슷썬다. 첫번째 썰은 재료에 두부를 팬에 기름을 두르고 노릇노릇하게 앞뒤로 지져 기름은 뺀다. 냄비에 감자와 홍고추를 담고 조림장을 반분량만 넣는다. ..

FrontEnd_day2 정리 (2021.12.03 금요일) 스타일 시트(CSS) Cascading Style Sheets : 계단형 스타일 시트 단계적으로 스타일 적용 여러 스타일이 겹치면 맨 마지막 스타일 적용 HTML의 레이아웃 배치 등의 한계를 보완하기 위해 개발된 독립 언어 일정 기능들을 미리 지정하여 여러 부분에서 동일하게 적용 가능 가능한 작업 HTML문서 내의 폰트, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 지정 정렬 방식, 그림자, 동적 기능 등 다양한 효과 장점 자유롭게 원하는 형태로 웹 문서 편집 가능 통일감 있는 문서 작성 한 번만 정의하여 문서에 일관되게 적용 가능 편리한 문서 관리 외부 스타일 시트 파일을 사용하여, 여러 웹 문서에 동일한 스타일 시트 사용 가능 한..

FrontEnd_day1 정리 (2021.12.02 목요일) HTML5 시멘틱 구조 태그 시멘틱(Semantic) : 의미의, 의미론적인 역할과 기능에 맞는 요소로 영역 구분해서 사용 각 요소(태그)가 의미가 있다는 것 : 헤더 (제목) : 내비게이션 (메뉴) : 사이드 바 : 컨텐츠 (내용) : 컨텐츠 안의 내용 (컨텐츠 영역을 세분화) : 푸터 (주소 / 연락처 / 저작권 등) HTML5 시멘틱 구조의 특징 HTML4로 만든 웹 문서의 결과 화면이나 HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 보이는 모습은 동일하지만 실제로 웹 브라우저에서 문서를 처리할 때 큰 차이 HTML5 시멘틱 구조의 장점 소스만으로도 문서 내용 쉽게 이해 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 ..