HTML이란?
HyperText Markup Language
웹페이지의 뼈대, 구조
CSS란?
Cascading Style Sheet
HTML로 작성된 문서를 디자인할때 사용. 색상, 크기, 위치, 배치 등!!
<HTML>
HTML은 부모 요소와 자식 요소로 구성
자식 요소는 부모 요소의 속성 상속받는다
태그 열고 내용 작성하고 태그 닫기
태그로 감싼 애들은 한덩어리로 취급한다
ex) <p>Hello</p>
태그: 내용을 나누고 구조가 어떤 역할을 하는지 정의한다
태그를 열어줬으면 내용 작성 후 닫아줘야 한다
태그를 중첩해서 사용했으면 안쪽 태그 먼저 닫은 뒤에 바깥쪽 태그를 닫아야한다
<div> 여러 요소들을 묶어서 블록 형태로 관리할때 사용
<span> 같은 줄의 특정 요소를 관리할 때 사용
<ul> unordered list
<ol> ordered list
<a> 하이퍼링크를 걸때 사용하는 태그
<img> 사진 삽입할때 사용하는 태그
<head> 웹페이지에 대한 정보
<body> 웹페이지에 출력할 내용
<h1> 제목을 작성할 때 사용. 크고 두껍다
<div> 영역이나 섹션 정의할 때 사용
<CSS>
1. inline style
html 파일 안에 직접 css 코드 작성하는 방법
2. <style>
html 파일의 head 안에 style 태그를 쓰고 그 안에 css 코드를 작성하는 방법
3. Link
외부에 작성된 css 파일을 불러와 html 파일과 연결시키는 방법
<head> 태그 안에 연결
CSS 문법
선택자
: html 파일 내 특정 요소를 선택하여 스타일을 적용할 수 있게 해준다
선택자로 CSS를 적용할 요소를 선택하고 속성에 값을 지정하여 어떤 기능을 넣을지 결정한다
태그 선택자
: html 파일에 사용된 태그들을 선택자로 사용
클래스 선택자
: 동일한 태그가 여러번 사용되었을때 특정 태그에만 CSS 적용
CSS를 적용할 태그 안에 클래스 명을 정하고 CSS 파일로 이동해서 해당 클래스에 속성을 부여한다
아이디 선택자
: 클래스 선택자보다 우선 순위가 높은 선택자
클래스 선택자처럼 CSS를 적용할 태그 안에 아이디 명을 정하고 CSS 파일로 이동해 해당 아이디에 속성을 부여한다
우선순위: !important > #id> .class> tag -> 동일한 요소에 선택자가 여러개 사용된다면 우선순위가 높은 것부터 적용된다
CSS Color : 주로 hex code 사용
HTML의 모든 요소는 Box 형태!!
Border: 사용자가 태그 안에 적은 내용을 담고 있는 부분
Padding: Content와 Border 사이의 여백
Margin: Border 밖의 여백
Border: border-style, -color, -radius
Content: width, height
서로 다른 요소들이 붙어있을 때는 마진 상쇄 발생! -> 왼쪽요소 오른쪽 마진과 오른쪽 요소 왼쪽 마진 중 큰 값을 따라간다
display
1. block element
<div>
<h1> ~ <h6>
<p>
새로운 줄에서 시작
width, height, margin, padding 가능
2. inline element
<a>
<span>
<img>
줄바꿈 X
width, height, margin, padding 불가능
position
static: 고정 기본값
fixed: 사용자 브라우저 기준, 스크롤 영향 X
absolute: 부모 요소 기준
relative: 원래 표시되어야할 위치 기준
z-index : 다른 요소들과 겹칠때 요소들의 앞 뒤 순서를 정의하는 속성.. position 속성 설정해주어야 적용 가능(static 예외)
웹 폰트 적용
CSS 파일 맨 위에 코드 작성
Flex & Grid
flex: 1차원 배치, 한번에 하나의 행/열
grid: 2차원 배치, 행/열 함께 조절
반응형 웹: 화면 해상도에 따라서 가로폭이나 세로폭의 배치를 변경하는 반응형 웹디자인을 적용해야 한다
'멋쟁이 사자처럼 10기 > 세션' 카테고리의 다른 글
| 2022/05/06 <django Blog #2 세션> (0) | 2022.05.14 |
|---|---|
| 2022/05/06 <django Blog #1 세션> (0) | 2022.05.12 |
| 2022/04/08 <django 기초 세션> (0) | 2022.05.12 |
| 2022/04/05 <Git 세션> (0) | 2022.05.09 |
| 2022/04/01 <Python 세션> (0) | 2022.05.09 |