HTML & CSS4 4. CCS 스타일(속성) 🎨 스타일속성 [ 단위 ] px 기기해상도에 따른 1px의 개수 만큼의 크기 % 백분율, 부모요소의 크기에 딸른 상대적 백분율 em 요소의 자신의 글꼴 크기 기준, 요소가 가지고 있는 글꼴크기가 16px -> 1em = 16px rem 루트(최상위 요소, html)의 글꼴크기를 기준으로 하는 단위 (기본값 16px) html { font-size: 10px;} -> 1rem = 10px vw 뷰포트(브라우저에 보여지는 화면 전체) 기준으로 가로 너비의 백분율 vh 뷰포트 기준으로 세로 너비의 백분율 [ 단축속성, 개별속성 ] 단축속성: 위치별속성지정, top부터 시계방향 띄어쓰기로 구분해 단축시킬수 있음 개별속성: 속성의 값을 개별로도 지정 할수있음 margin, padding, border, borde.. 2023. 8. 8. 3. CCS 문법, 선언방식, 선택자 🎨 CSS 문법 - 선택자 {속성: 값;} 선택자의 속성은(:) 값이다(;) 선택자 (Selector): 스타일을 적용할 대상 속성 (Property): 스타일의 종류 값 (Value): 스타일의 값 {}: 한 선택자에 부여할 여러가지 속성을 세트로 묶어줌 [ 선언방식 ] - 인라인 방식 요소의 style 속성에 직접 작성 (선택자 없음) 우선순위가 너무높아 다른것으로 덮어씌우기 힘들어 유지보수가 어려움 - 링크 방식 htmk>head>link 태그의 속성으로 경로를 지정해 외부 CSS 파일을 가져와 연결 병렬방식: 여러개의 CSS가 link로 연결되어 있으면 한번에 모두 읽어서 해석이 완료되는 CSS문서 부터 적용 - @import 방식 현재문서를 기준으로 @import에 경로를 지정해 다른 CSS문서.. 2023. 8. 8. 2. HTML 기본문법과 핵심 요소 🦴 HTML 기본문법 - 태그(Tag) - 요소(Elements) 요소의 내용(Contents) ㄴ 태그까지 포함한 내용 전체 - 빈(Empty)태그 닫힌태그가 없어 내용을 입력할수 없어 내용이 비어있는 태그 , , 등등... 기본역할이 있지만 속성과 값이 없으면 활용 할수 없음 (br, hr등 제외 태그 있음) : 편리함, HTML 1/2/3/4/5 : 안전함, XHTML(닫는곳 지정 엄격한 문법) / HTML5 - 속성과 값 태그 속성(Attribute)="값(Value)">내용li, ol>li 한 세트 [ Inline(글자) 요소 ] - img (image) 이미지를 삽입하는 요소, src alt 필수속성 -img도 inline요소라 이미지가 화면에 노출되면 글자처럼 취급하기빼문에 baseline .. 2023. 8. 6. 1. 웹과 HTML 기본 개념(Tip. 특수문자이름) 웹 표준 W3C(표준화 제정 단체)에서 제정한 권고안에 해당하는 기술이나 규칙을 의미 - 표준화 제정 단계 1. 초안 2. 후보권고안 3. 제안권고안 4. **권고안** 에 해당하는 기술 - 태그의 필수 속성을 지정하지 않으면 웹표준에 어긋남 - CSS 동작가상선택자 :: 로 표기하는게 웹표준 의미있는 마크업(Semantic Markup) 콘텐츠 데이터의 의미(가장 잘 설명및 표현해줄수있는)와 맞는 HTML 태그로 감싸 의미있는 요소 문서를 작성하는 것 SEO에도 도움이됨 [ MDN - Semantic ] 검색 엔진 최적화 (SEO) search engine optimization 웹사이트가 검색에 더 잘보기에 하기위한 작업 [ MDN - SEO ] 크로스 브라우징 브라우저를 만드는 회사가 다양해 조금 .. 2023. 7. 22. 이전 1 다음
