[3일차] HTML, CSS 기초

유태형·2022년 4월 27일

CSS html 코드스테이츠

코드스테이츠

목록 보기

4/77

HTML, CSS, 자바스크립트에 대하여

HTML은 웹 문서를 구조적으로 표현하기 위한 언어
CSS는 구조적인 문서를 어덯게 시각적으로 표현하는지에 대한 언어
자바스크립트는 웹 문서를 표현하기 위한 스크립팅 언어였으나, Node.js를 통해 서버제작, PC를 위한 앱 / 프로그램을 만들 수 있는 범용적인 프로그램이 언어가 됨

HTML

태그들의 집합
Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소
트리구조
태그 열고 닫는 순서는 철저히 지켜짐

SEF-CLOSING TAG

태그 내부에 내용이 없다면 <Tag/>와 같이 표현 가능

div VS span

div는 한줄 차지합니다.
span은 컨텐츠 크기만큼 차지합니다.

img : 이미지 삽입

<img src = "이미지 위치">
alt=대안 텍스트속성으로 이미지 로딩 실패스 나타나는 텍스트 설정 가능합니다.

a : 링크 삽입

<a href="https://codestats.com" target="_blank">코드스테이츠</a>
target="_blank" : 페이지를 이동하지 않고 새 창을 띄웁니다.

ul, ol, li : 리스트

ol : 1번,2번,3번,,,,등 순서가 존재합니다.
ul : 단순한 점으로 순서가 존재하지 않습니다.
li : 리스트 구성요소들입니다.

input, textarea : 다양한 입력 폼

<input type="text" placeholder="input here"> : placeholder는 힌트를 줍니다.
<input type="password"> : 비밀번호
<input type="checkbox"> : 체크박스 n개 중복 가능
<input type="radio"> : 라디오 버튼 n개중 1개만 선택, name속성으로 하나로 묶어줘야 1개만 가능
<textarea></textarea> : 줄바꿈이 가능합니다.

button

<button>버튼</button> : 버튼 만들기
<input type="submit"> : 제출버튼을 만듭니다.

CSS

스타일링 을 위한 도구
컨텐츠의 배치와 위치(레이아웃 디자인)
텍스트를 강조하거나 밑줄을 치는 증, 최소한의 타이포그래피
꼭 포토샵이 필요하지만은 않고 인터넷 검색으로 무료로 이용할 수 있음

CSS 예제

텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?

text-align

글자 색을 바꾸기 위한 속성은 무엇인가요?

color

배경 색을 바꾸기 위한 속성은 무엇인가요?

background, background-color

background 속성과 background-color 속성은 어떻게 다른가요?

background-color : 배경색을 color속성의 포맷으로 지정
background: background-color 뿐만 아니라 background-image, background-repeat, background-position등 배경속성들을 한번에 지정

em의 의미는 무엇인가요?

상위 요소 글자 크기(font-size)의 몇 배인지 정합니다. 상대적인 값입니다.

CSS 파일 추가

`
rel=연결하고자 하는 파일의 특징이나 역할
href=파일의 위치를 절대경로 또는 상대경로로 표시

display:flex

Flex 컨테이너에 flex 적용하여 내부 아이템들은 차곡차곡 순서대로 쌓임
flex-direction : column : Flex 컨테이너에 아이템들이 위에서 아래로 쌓임
(row, row-reverse, column, column-reverse)
flex-basis : 크기 : flex 아이템의 기본 크기 지정
flex-grow : 1 : 여백을 비율에 맞춰 늘림
flex-shrink:1 : flex-basis보다 작아 질 수 있음

CSS 스타일 적용법 3가지

인라인 스타일 : 태그내 같은 줄에서 스타일 적용
내부 스타일 : <head>태그내에 <style>태그 작성
외부 스타일 : 외부에서 작성한 CSS파일을 <link rel="stylesheet" href="파일"/>로 적용

선택자

id = "아이디" <> #아이디{}
class = "클래스" <> .클래스{}
class는 '공백( )'으로 여러 클래스를 나열 가능합니다.

폰트

color: #155724 : 글자 색상
background-color: #d4edda : 배경 색상
border-color: #c3e6cb : 테두리 색상
font-family : "SF Pro KR", "MalgunGothic", "Verdana" : 글꼴 순서대로 fallback
font-size : 24px : 글자의 크기
text-decoration : underline : 밑줄 그음

절대 단위 : px, pt 등
상대 단위 : %, em, rem, ch, vw, vh 등
굵기 : font-weight
밑줄, 가로줄 : text-decoration
자간 : letter-spacing
행간 : line-height

박스

<h1> , <p>와 같은 블록은 줄바꿈이 적용됩니다.
<span>줄바꿈 및 weight 속성이 적용되지 않습니다.

border(테두리)

각영역이 차지하는 영역을 파악하기위해 레이아웃을 만들면서 시각적으로 확인가능
border: border-width border-style border-color

테두리를 점선으로 만들고 싶다면? border-style:dashed
테두리를 둥근 모서리로 만들고 싶으면? border-radius: px or %
박스 바깥쪽에 그림자를 넣을려면? box-shadow: none | x-position y-position blur spread color

margin

테두리 밖 부분의 여백

margin: 상px, 우px, 하px, 좌px
margin: 상하px, 좌우px
margin: 상하좌우px
margin-top: 상px
margin-right: 우px
margin-bottom: 하px
margin-left: 좌px

padding

테두리와 내용물 사이의 여백

padding: 상px, 우px, 하px, 좌px
padding: 상하px, 좌우px
padding: 상하좌우px
padding: top: 상px
padding-right: 우px
padding-bottom: 하px
padding-left: 좌px

벗어나는 컨텐츠 처리

overflow: auto; 컨텐츠가 넘치는 경우 스크롤을 생성
overflow-x:hidden; x축 스크롤 숨기기
overflow-y:scroll; y축 스크롤 표시

{ box-sizing:border-box } : 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다.

인접 형제 선택자

section + p{ } : section 바로 뒤에 오는 p만 적용됩니다.
section ~ p{ } : section 뒤에 오는 모든 p에 적용됩니다.

가상 클래스

:link : 방문한 적이 없는 링크
:visited : 방문한 적이 있는 링크
:hover : 마우스를 롤어버 했을 때
:active : 마우스를 클릭 했을 때
:focus : 포커스 되었을 때
:first : 첫번째 요소
:last : 마지막 요소
:first-child : 첫번째 자식
:last-child : 마지막 자식
:nth-child(2n+1): 홀수 번재 자식

요소 상태 선택자

input:checked + span { } : input태그가 체크된 상태일 때
input:enabled + span { } : input태그가 사용 가능한 상태일 때
input:disabled + span{ } : input태그가 사용 불가능한 상태일 때

유태형

오늘도 내일도 화이팅!

이전 포스트

[2일차] CS, TOOL

다음 포스트