SEB_BE 3일차 - HTML,CSS

subimm_·2022년 8월 23일

코드스테이츠 프론트엔드

코드스테이츠

목록 보기

4/83

💡 오늘의 학습 목표

📔 HTML

웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 마크업 언어
HTML은 tag 들의 집합
tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소
TREE STRUCTURE 태그를 열고 닫는 구조 (<tag></tag>)
시멘틱 태그 의미를 부여한 태그

자주 사용하는 HTML 요소

<div> - Division (한 줄 차지)
<span> - Span (컨텐츠 크기만큼 공간 차지)
<img> - Image (src="" , 이미지 삽입, 닫는 태그가 없음)
<a> - Link (href="",target="_blank" 새창열기 링크 삽입)
<ul>&<li> - Unordered List & List Item (ol은 넘버링 리스트)
<input> - Input (Text, Radio, Checkbox) (입력 폼
<textarea> - Multi-line Text Input
<button> - Button

타입 폼 - 텍스트 박스

<input type="text" placeholder="here">
<input type+"password">
//패스워드는 *표시

타입 폼 - 체크 박스

<input type="checkbox"> ID 저장

타입 폼 - 라디오 버튼 (둘 중 하나 선택)

<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b
/ name 속성을 이용하여 하나의 그룹으로 만들어야 둘 중 하나가 선택됨

타입 폼 - textarea (멀티 라인)

<textarea></textarea>
/닫아주어야 함

버튼

<button>로그인</button>

📔 CSS

background는 컬러 이외의 다른 옵션을 지정해 줄 수 있다.
CSS 파일 추가하기

<link rel="stylesheet" href="main.css" />

link 태그로 HTML 파일과 다른 파일을 연결
rel 연결하고자 하는 파일의 역할이나 특징
href 파일의 위치 (다른 폴더에 파일이 존재할 경우 절대 경로/상대 경로 입력)

HTML 요소에 직접 CSS 속성을 추가하는 방법
인라인 스타일

<nav style="background: blue; color: black">...</nav>

셀렉터

id로 이름 붙여서 스타일링 적용

엘리먼트에 id 붙여서 해결
```
<h1 id="section1-title"> section </h1>
```

```css
#section1-title {
color: red;
}

id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름

class로 스타일을 분류하여 적용

li 요소에 밑줄치기

  li{
  	text-decoration: underline;
   }
  / 전체 li 요소에 적용된다.

class 지정하여 해결

<ul>
          <li class="box">box1</li>
          <li class="box">box2</li>
          <li class="box">box3</li>
          <li class="box">box4</li>
        </ul>

  .box {
  	text-decoration: underline;
    }

class box를 선택하여 밑줄 적용 . 으로 클래스 선택

하나의 요소에 여러 class를 적용 (띄어쓰기로 구분)

<li class="box menu">box1</li>

특정 클래스(selected)를 통해서 요소를 스타일링

.menu{
	font-weight: bold;
    color: red;
  }

셀렉터의 우선순위

!important
Inline style
ID
Class
element seleter
universal (*)

텍스트 꾸미기

색상
color 글자의 색상 변경
.box {
color: blue;
}
그 외 배경색상이나 박스 테두리 색상 변경 가능
.box {
	color: #000000; /*글자 색상*/
    background-color: red; /* 배경 색상*/
    border-color: gray; /*테두리 색상*/
  }

글꼴
font-family 글꼴 설정
.fontf {
	font-family: "SF Pro KR", "MalgunGothic", "Verdana";
  }
지원하지 않는 경우를 대비하여 fallback 쉼표로 구분하여 순서대로 적용됨.
google Fonts
글자 크기
font-size 글자 크기 변경
.user {
	font-size: 1em;
  }
px - 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
rem -일반적인 경우 상대 단위. 브라우저의 기본 글자 크기가 1rem , 두배는 2rem

기타 스타일링
font-weight 굵기
text-decoration 밑줄, 가로줄
letter-spacing 자간
line-height 행간

정렬
text-align 가로 정렬
- left right center justify(양쪽정렬)

박스 모델

웹 페이지 내의 모든 콘텐츠의 고유의 영역
박스는 항상 직사각형이고 너비(width)와 높이(height)를 가진다.

p {
 background: gray;
 width: 90%;
 height: 150px;
 }

<h1>, <p> , <div> 는 줄바꿈이 되는 태그 - block 박스
<span> 은 줄바꿈이 되지 않는 태그 - inline 박스

span {
 background: red;
 display: inline-block;
 width: 80px;
 height: 80px;
}

display: inline-block 을 추가하면 가능 (줄바꿈x 고유크기o)

박스를 구성하는 요소

border (테두리) - 각 영역이 차지하는 크기 파악 가능

p {
  border: 1px dotted green;
}

각각 border-width border-style border-color 순서
border-style

margin (바깥 여백)

p {
  margin: 10px 20px 30px 40px;
}

각각 top right bottom left 시계방향 순서
값을 10px 20px 두개만 넣으면 위아래가 10 좌우가 20
값을 하나만 넣으면 모든 방향에 적용
바깥여백은 음수 값 지정가능

padding (안쪽 여백)

p {
  padding: 10px 20px 30px 40px;
  border: 1px solid green;
  background-color: skyblue;
  }

각각 top right bottom left 시계방향 순서

박스를 벗어나는 콘텐츠 처리

박스 크기보다 콘텐츠 크기가 더 큰 경우에는 크기를 맞추거나 스크롤 추가

p {
  height: 30px;
  overflow: auto;
}

여백과 테두리를 포함한 박스 계산법 * 모든 요소 선택 셀렉터

* {
  box-sizing: border-box;
}

컨텐츠의 폭과 높이를 패딩과 보더를 포함한 범위

회고

오늘은 본격적으로 학습이 진행되었다. 그래도 아직 백엔드 파트가 아니라 HTML,CSS찍먹 수준으로 하긴 했지만 양이 방대해서 힘들었던것 같다,,,블로그 쓴 걸 보니까 더 정신없게 공부한게 보이는 듯 하다. 학습시에 아예 블로그에 작성하면서 정리하고 공부하다보니까 글도 길어지고 복잡해지는듯.. 학습 방법은 계속 고민해봐야겠다.