HTML / CSS 기초
HTML / CSS 기초
HTML?
- HyperText Markup Language
- 웹 페이지의 틀을 만드는 마크업 언어
사용법
- Html은 tag들의 집합
- Tag : 부등호(<>)로 묶인 기본 구성 요소
- html 확장자 사용
TREE STURCTURE
- HTML 문서 시작 →
- html → 시작 태그, 문서 전체의 틀 구성
- head → 문서의 메타데이터 선언
- title : Page title, 문서의 제목 → 브라우저 탭에 노출
- body → 문서의 내용
- h1 → heading을 의미, 크기에 따라 h1~h6
- div : Content division → 줄바꿈 됨
- span : Content Container → 줄바꿈 없음
- head → 문서의 메타데이터 선언
- html → 시작 태그, 문서 전체의 틀 구성
Most Used TAGS in HTML
| 태그 | 설명 |
|---|---|
| div | Division |
| span | Span |
| img | Image |
| a | Link |
| ul & li | Unorderd List & List Item |
| input | Input (Text, Radio, Checkbox) |
| textarea | Multi-line Text Input |
| button | Button |
CSS?
HTML, CSS, 그리고 JS는 웹 어플리케이션을 만드는 세가지의 주축이다. CSS는 스타일링을 담당한다.
- 콘텐츠의 배치와 위치 (레이아웃 디자인)
- 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)
위의 요소를 갖춘다면 더 나은 사용자 경험(UX, User Experience)을 제공할 수 있다.
CSS를 작성해서 간단한 UI를 만드는 것은 개발자의 기본적 소양이다. 콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인은 디자이너가 아니라도 할 수 있어야 한다.
일반 사용자를 대상으로 하는 어플리케이션은, UI(User Interface)가 없으면 소용이 없다.
사용자 인터페이스(UI)는 사람과 컴퓨터 프로그램이 소통할 수 있도록 만들어진 요소.
훌륭한 내부 기능도 UI가 없으면 소용이 없다.
프론트엔드 개발자에게 요구되는 능력
- 화면의 구성이나 배치 (레이아웃 디자인)
- 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일
- 정렬이나 배색에 대한 감각
- UX에 대해 고민하고, 잘 적용된 웹이나 앱 예제를 분석해본 경험
*Reference : Jang, p. → CSS 모범 사례
#시멘틱 태그
CSS 문법 구성
셀렉터는 태그의 이름이나 id, class를 선택한다. 셀렉터로 특정 요소를 선택하고, 중괄호 안에 요소에 적용할 내용을 작성한다. 요소에 적용할 수 있는 내용을 속성이라고 한다. 색상이나 글자 크기등의 속성이 있다. 속성에 적용할 값을 입력하여 스타일을 표현한다. 속성과 값의 끝에는 세미콜론( ; )을 붙여 속성끼리 구분한다.
CSS 파일 추가하기
css 파일을 html 파일에 연결할 때는, link 태그 안에서 href 속성을 통해 파일을 연결한다.
1 | <link rel=”stylesheet” href=”index.css” /> |
link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다.
→ rel은 연결하려는 파일의 역할이나 특징을 나타낸다. CSS는 Style sheet.
→ href 속성에는 파일의 위치를 추가해야 한다. 절대결로 혹은 상대경로를 입력.
CSS 스타일 적용법 (3가지)
- 인라인 스타일 : 같은 줄에서 스타일 적용
- 내부 스타일 시트 : 별도의 파일로 구분하지 않고 style 태그 내에 작성
- 외부 스타일 시트 : CSS 파일 내에 작성하는 내용
기본적인 셀렉터 (selector)
| id | class |
|---|---|
| # | . |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소가 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |
Font[글꼴]
웹 폰트 기술과 최신 동향
구글 폰트(Google Fonts)
⇒ HTML link 태그를 사용하여 간단하게 embed 가능
글자 크기
- 속성 → font-size: ;
- 절대 단위 : px, pt
- 상대 단위 : %, em, rem, ch, vw, ch
기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기
px(픽셀) : px는 글꼴의 크기를 고정하는 단위. 사용자 접근성이 불리함.
⇒ 크기가 고정되어 인쇄와 같이 화면의 사이즈가 정해진 경우
일반적인 경우
rem : 상대 단위, root의 글자 크기(=브라우저의 기본 글자 크기)는 1rem / 두배로 크게 적용시 2rem / 작게 적용 0.8rem 등 조절해서 사용
⇒ 사용자 설정 기본 글꼴 크기를 따라 접근성에 유리
⇒ em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되어 계산이 어려움
반응형 웹(responsive web)에서 기준점을 만들 때
- 반응형 웹은 디바이스 너비(width)에 따라 유동적인 레이아웃이 적용되는 엡사이트. 데스크탑, 스마트폰의 가로 모드-세로모드, 태블릿 등. 디바이스 크기 별로 CSS를 달리 적용해야 한다면 디바이스 크기를 나누는 기준은 보통 px로 정한다.
글자 스타일링
- 굵기 : font-weight
- 밑줄, 가로줄 : text-decoration
- 자간 : letter-spacing
- 행간 : line-height
정렬
- 가로 정렬 : text-align
- 유효값 : left, right, center, justify(양쪽 정렬)
- 세로 정렬
HTML 문서 레이아웃
줄바꿈이 되는 박스(block) / 옆으로 붙는 박스(inline, inline-block)
- block 박스 : 줄바꿈이 됨 ⇒
- inline 박스 : 줄바꿈 x, 크기지정이 불가능 ⇒
- inline-block 박스 : 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가짐
줄바꿈이 되는 태그 / 되지 않는 태그
- 줄바꿈이 되는 태그 :
- 줄바꿈이 되지 않는 태그 :
→ 개발자 도구 elements tab : cmd + opt + i 단축키
→ MDN block 엘리먼트 목록 / inline 엘리먼트 요소
| block | inline-block | inline | |
|---|---|---|---|
| 줄바꿈 | O | X | X |
| 기본 너비 (width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 | 가능 | 가능 | 불가능 |
박스 구성 요소
border (테두리)
- border-width : 테두리 두께
- border-style : 테두리 스타일
- border-color : 테두리 색상
- border-style mdn → 세부 속성 검색
margin (바깥 여백)
margint : top right bottom left ; ⇒ 값 하나만 적용시 모든 방향의 바깥 여백 적용
padding (안쪽 여백)
padding : top right bottom left ; ⇒ 값 하나만 적용시 모든 방향의 안쪽 여백 적용
박스를 벗어나는 컨텐츠 처리 ⇒ overflow
박스 크기에 맞게 컨텐츠를 표시하지 않거나, 스크롤을 추가하여 확인하는 방법
- overflow : (overflow-x / overflow-y);
- auto : 컨텐츠가 넘칠 때 스크롤 생성
- hidden : 컨텐츠가 넘칠 때 보이지 않기
셀렉터 *
모든 요소를 선택하는 셀렉터 * 에 속성 추가
→ box-sizing : border-box;
모든 박스에서 여백과 테두리를 포함한 크기로 계산
- content-box : 박스 크기를 측정하는 기본값
- border-box : 여백과 테두리를 포함하는 박스 크기 계산법
