html
프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
기본 지식
태그 모음
이러한 태그를 사용해야 하는 이유
1. HTML 문서의 가독성과 유지보수가 쉬워지기 때문입니다.
2. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있습니다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용됩니다.
3. 검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할 수 있습니다.
layout을 위한 태그
header: HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
nav: HTML 문서의 탐색 링크를 정의함.
section: HTML 문서에서 섹션(section) 부분을 정의함.
article: HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
aside: HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
footer: HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.
tag에 attribute
id, class 속성: id는 원칙상 하나의 id당 하나의 태그에만 적용 할 수 있으며, class는 하나의 class를 여러 태그에 적용 할 수 있습니다.
style 속성: 보이는 형태를 정의하는 속성입니다. HTML 자체의 기능이라기 보다는 CSS의 속성들을 HTML 문서 내에서 태그에 직접 설정할 때 쓰이는 속성입니다.
data 속성: 정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다.
주석
<!-- 주석내용 -->
[CSS]
CSS를 적용하는 방법 (External, Internal , Inline)
1) External CSS
HTML 파일 외부에 .css 파일을 작성하고 link하여 적용하는 방식
<head> 태그 안에 <link> 태그를 이용하여 css파일을 적용한다.
ex) <head><link rel="stylesheet" type="text/css" href="test.css"></head>2) Internal CSS
HTML 파일 내부 <head>태그 안에 <style>태그를 이용하여 css를 적용
ex) <head><style>h1{ color : red; }</style></head>
3) Inline CSS
적용하고자 하는 태그 안에 style 요소를 이용하여 css 적용
ex) <h1 style="color : red; ">테스트입니다.</h1>
External CSS가 재사용 할 수 있기도 하고 디자인을 통일하는데 도움이 될 것 같다.
Cascading
스타일 우선순위는 다음 3가지 요소를 통해 우선순위를 결정합니다.
- 중요도
- 명시도
- 코드 순서
중요도
중요도는 스타일이 선언된 위치(사람)에 따라서 우선순위를 매기는 것입니다. 스타일 시트는 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉩니다.
!important 작성자 스타일 시트 > !important 사용자 스타일 시트 > 작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도구 스타일 시트
!important로 중요도를 끌어올릴 수 있다.
명시도
모호하게 여러개를 가리키는 셀렉터 보다 적은 범위를 명확하게 가리키는 셀렉터 스타일의 우선순위가 높다는 것 입니다.
인라인 > id > class > 태그
상속
CSS Selector
style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다.
tag, id, class, attribute, 복합 등 가능
Box model
CSS의 display 속성: inline, block, inline-block (https://www.daleseo.com/css-display-inline-block/)
inline: display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다.
block: display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.
글꼴 적용
html에 추가하고 링크에 거는 방식이 편한 것 같습니다.
피그마 사용법
이 화면은 로그인을 해야 볼 수 있다는걸 몰랐다....
이것때문에 그냥 presentation만 보고 내 맘대로 하고 있었는데, 갈아 엎었다....
