HTML && css by 강다영

개발자 환경구축 툴 VSCode 초기 기초설정

a01049479039 — 2024-05-28 08:31:39 UTC

VSCode 를 열고 왼쪽 아이콘들 중 제일 밑에 확장 아이콘 클릭
korean language pack for visual, Live Server, HTML Snippets, htmltagwrap, Beauty(탭정리), JavaScript (ES6) code snippets, Bracket Pair Color DLW, Material Icon Theme, ES7+ React/Redux/React-Native snippets, Simple React Snippets입력 후 설치
(Material Icon Theme은 f1 눌러서 활성화시켜야함)
파일 > 폴더 열기 > 본인 작업할 ex) C:\강다영\html\01_Basic_HTML 폴더 선택

웹 작동방식

a01049479039 — 2024-05-28 08:58:22 UTC

웹 작동방식 = C-S 방식 = http 통신규약

웹 = 브라우저

C = Client = 고객= 사용자 = 브라우저

S = Server = 회사 = 기능이 구현되어 있는 컴퓨터

브라우저(html/css/js)에서 요청하는 것을 서버(java, JSP)에서 확인 후 응답하는 과정

[] : 코어기술

a01049479039 — 2024-05-28 09:13:14 UTC

프론트엔드 [html/css, javaScript], jQuery + react

백엔드 [java], JSP, Spring

DB관련 언어 [SQL]

HTML/CSS/javaScript

= 컴퓨터는 기계어만 인지하고 해석함 ex)010101

= 파싱(parsing)

= 해석기

브라우저 내장되어 있는 해석기

= html 해석기, css 해석기, js 해석기

해석 방식

a01049479039 — 2024-05-28 09:24:50 UTC

해석기(html/css/js) 해석 방식

= top - down

= interpreter

= 위에서부터 밑으로 한줄씩 읽음

장점 - 쉬운 오류 찾기

단점 - 느림

자바

=compiler 방식

장점 - 여러군데서 동시에 읽기에 빠름

단점 - 어려운 오류 잡기

html(Hyper Text Markup Language)=구조

a01049479039 — 2024-05-28 09:43:01 UTC

.html 문서

= 태그중심의 언어

= 브라우저만 해석(parsing)함

<태그> : 어떠한 기능들을 가지고 있음

a. 쓰는 형식(<요소명>=태그)

a-1. <시작태그>,

a-2. <단일태그> = 빈태그 = 홑태그

b. 태그의 성격

b-1. 블록레벨요소 = 브라우저 너비 전체를 차지

b-2. 인라인레벨요소 = 콘텐츠 양만큼의 너비만 차지

DOM 객체들로 이루어져 있음(수학 집합적 이론과 비슷한 말인듯)

=부모자식관계에 있음

=항상 탭코딩을 하여 부모와 자식의 구분을 명확히 볼 수 있게 해야함

DOM 객체란 마치 레고와 같이 누군가 만들어둔 부품들을 내가 조립만해서 가져다 쓰는 방식을 일컫으며 dom객체 > 위계질서 > 부모자식 관계로 이해할 수 있다

예를 들어 body태그에 css를 적용해서 변화를 준다면 그 변화가 body 안에 들어있는 다른 태그들에도 영향을 끼친다

CSS(Cascading Style Sheet)=인테리어

a01049479039 — 2024-05-28 09:49:43 UTC

javaScript(ECMA Script)=동사(동적인 것)

a01049479039 — 2024-05-28 09:50:17 UTC

java랑 javaScript는 다름

기타

a01049479039 — 2024-05-28 10:13:48 UTC

※파일 생성시 확장자는 꼭 써줘야하며, 파일명은 영문표기를 권장

(한글로 파일명 입력시 오류 발생 가능성 있음)

실무, 학습의 트렌드

= 구글링

훈련 교수님 메일 주소

indopop@naver.com

평가일

- 6/10(월)

관련 자격증

정보처리기사(기능사)

웹디자인기능사

취업의 우선순위

1. 인성

2. 성실성, 융화, 기본원리

3. 실력

엔티티 코드(특수기호를 코드화해둔 것) 정리 사이트

https://entitycode.com

색깔 참조

https://color.adobe.com/ko/trends

픽셀, em 계산기

https://pxtoem.com.au/

FTP주소 받는 곳

https://www.dothome.co.kr/

아이디 : rkdekqnd

비밀번호 : big902525!

내 FTP주소

myunicorn.dothome.co.kr

FTP 연동 파일질라 프로그램 다운 링크

https://filezilla-project.org/

피그마 다운 링크

https://www.figma.com/ko-kr/downloads/

햄버거 버튼 사용 참고(HTML에 CDN 주소 넣어줘야함), 폰트어썸(아이콘)

https://fontawesome.com/

폰트어썸 CDN 주소

https://cdnjs.com/libraries/font-awesome

유용한 아이콘

https://icons8.kr/line-awesome

head 태그

a01049479039 — 2024-05-28 10:21:54 UTC

안에 들어올 수 있는 자식이 한정되어 있음

문서의 제목
한글이 깨질 것을 방지, 단일태그, 영미권이 아니고서야 이라고 쳐야 인코딩이 됨

!DOCTYPE html 태그

a01049479039 — 2024-05-28 10:29:43 UTC

html5를 기준으로 한 기본적인 형식을 나타냄

보통 html문서 작업시 맨 처음 작성

!치고 TAB 버튼 눌러주면 자동으로 기본 형식이 완성됨

단축키

a01049479039 — 2024-05-28 10:57:51 UTC

ALT+L ALT+O

VSCode에서 브라우저 띄우기
VSCode내 extenstion에서 Live Server 설치 해야 기능함

ALT + 방향키

한줄 정도를 원하는 위치로 통채로 옮기게 해줌

ALT + W

확장에서 htltagwrap을 설치하면 사용할 수 있는 단축키로, 기본적인 태그를 자동으로 입력해줌

ALT + 클릭

작업하고 싶은 부분을 클릭 후 알트 누른 채로 다른 곳도 클릭하면 클릭된 곳들을 전부 동시 작업이 가능하게함

CTRL + /

CSS에서는 /* 이런식으로 슬래쉬 하고 별 모양으로 뜸 */

CTRL + X

잘라내기

html:5

! + TAB 단축키가 안먹히면 사용
기능은 같음

윈도우 + SHIFT + S

윈도우 캡처

SHIFT

쉬프트 누른 채로 방향 화살표키를 누르면 그만큼 드래그(텍스트 노드)가됨

SHIFT + TAB

여러 열을 동시에 탭 갯수를 줄여주는 단축키
반대로 들여쓰기는 그냥 TAB만 누르면 된다

END

줄의 제일 끝으로 커서를 이동시켜줌

F12

웹에서 개발자 도구를 열어줌

이름변경

ALT + SHIFT + 화살표 하단

한줄복사

TAB

쓰고자 하는 태그 앞 몇글자를 입력후 탭을 눌러주면 태그가 자동완성됨.

CTRL + H

바꿀 부분 드래그 후 단축키 누르면 같은 내용 모두 바꾸기 가능

윈도우즈, 리눅스 장단점/차이점

a01049479039 — 2024-05-29 06:59:34 UTC

a. 윈도우즈

=GUI(Graphic Use Interface), 마이크로소프트, 유료, 고사양 요구

b. 리눅스

=CLI(Command Line Interface, 무료 API, 저사양에서도 잘 동작

개발자 환경 구축 pdf

a01049479039 — 2024-05-29 07:08:55 UTC

속성별 특징

a01049479039 — 2024-05-29 07:22:55 UTC

기본적으로는 으로 뜨는데 ko로 변경해주기

시각장애인과 같은 청각에 의존해야 하는 사람들을 위해 있는 화면낭독기에서 해당 언어에 맞는 억양, 발음, 목소리 등을 다르게 읽어준다.

반응형웹에서 사용됨

표기법

a01049479039 — 2024-05-29 08:04:57 UTC

카멜 표기법

두개의 단어가 합쳐질때 두번째 단어의 첫자를 대문자로 표시해서 구분

ex) javaScript

Labeling 기법

<요소명>

의미있는 이름

tip

a01049479039 — 2024-05-29 08:08:52 UTC

기본적인 폰트크기

16pixel

가상이미지 불러오는 법

로고

로고는 h1 태그 안에 넣어 입력하는 것이 보편적이다

margin

박스 밖

padding

박스 안

각도 단위

deg

background: none, background-color: transparent

둘다 색상 상속 안됨

미디어쿼리할때 유용

ntt코드

=© $nbsp; 등

=gnb메뉴바나 푸터에서 한 칸 뛸 때는 왠만하면 사용

그 외 기타

::before ::after로 그린 데코는 포지션으로 위치 잡기

블록태그(구조)

a01049479039 — 2024-05-29 08:12:23 UTC

hn태그 : n =1-6

제목을 표시할때 쓰는 태그로

~

에 따라 글씨 크기와 두께의 차이가 결정됨
h1의 중요도가 가장 높음

p태그가 여러번 쓰일 수 있는 반면, 표준적으로 hn 태그는 한번만 사용해준다

p태그
콘텐츠 내용, 단락만들기

ul ol dl태그
목록형 태그로 상세 설명은 다른 페이지에 적어둠

table태그
몇행몇열 표를 만들기에 적합한 태그
table은 블록 태그지만 자식태그인 tr과 td같은 경우는 인라인 태그라 볼 수 있다

span태그와 div태그

a01049479039 — 2024-05-29 09:08:31 UTC

span태그

인라인 요소의 그룹핑 태그, 주로 css와 연동하여 사용

인라인

=줄바꿈 없음

div태그

span태그와 비슷한 역할을 하는 블록 요소의 그룹핑 태그

abbar태그

a01049479039 — 2024-05-29 09:36:41 UTC

단어의 축약


   

   WWW은 인터넷 발전에 많은 기여를 했다.

라고 입력하면 화면상에는 WWW라고 뜬다.

sup윗첨자/sub아랫첨자 태그

a01049479039 — 2024-05-29 09:43:55 UTC

위 사진과 같이 적어두면 E=mc다음에 오는 2는 윗첨자가 되고, H다음에 2는 아랫첨자가 되어 오른쪽 사진과 같이 보인다

글자효과태그

a01049479039 — 2024-05-29 10:52:04 UTC

b태그

bold체로 글자를 변경해줌

화면상으로 strong과 비슷하게 보임

낭독기 의미는 없음

i태그

italic체로 글자를 기울여줌

화면상으로 em과 비슷하게 보임

낭독기 의미는 없음

mark태그

형광펜 효과

em태그

화면상에 italic체로 글자가 기울어져 보임

strong태그와 마찬가지로 낭독기에서 강조해서 읽어줌

strong태그

글자 강조용

낭독기에서 강조해서 읽어줌

pre태그

엔터나 스페이스를 내가 쓴 대로 화면에 표시하는 요소로

거의 안씀

q태그

인용시 사용, ""생성

u태그

아래밑줄긋기

s태그

가운데밑줄긋기(취소표시)

small태그

글씨가 작게 나오게함

문장태그

a01049479039 — 2024-05-29 10:58:05 UTC

br태그

줄바꿈 효과

blockquote태그

인용문, 들여쓰기가 자동으로 적용된다.

hr태그

단일태그, horizental의 약자

분위기 전환을 위한 수평줄 넣기

a href태그

a01049479039 — 2024-05-30 07:09:14 UTC

다음

host = 서버

ref = 참조

대표적인 인라인 레벨

위와 같이 입력하면 화면에 뜬 다음이라는 글자를 클릭시 연결된 해당 주소 사이트로 이동을 가능케함

a는 인라인 태그이기 때문에 같은 태그로 여러줄을 써도 줄바뀜 없이 일렬로 나옴

뒤에 br태그를 입력해주거나 p태그(블록태그이기에) 안에 넣어줄 경우 줄바꿈 가능

target태그

a01049479039 — 2024-05-30 07:17:40 UTC

다음

어디에 창을 열게 할지 결정짓는 태그로 target="_blank"라고 치면 새 창으로 열리게 할 수 있음

target태그를 활용해 _blank입력을 해주지 않을 시 원래 있던 창에서 열린다

컴퓨터 경로

a01049479039 — 2024-05-30 07:48:54 UTC

./ = 현재의

./ = 경로 한단계 위의

웹

=html문서(텍스트로 이루어져있음)

=리소스(이미지, 동영상, 음악)가 직접 포함되지 않고, 리소스가 있는 경로를 지정하여 보여주는 방식

=그래서 빠름

상대경로

=어딘가에 기준이 있음

=현재 코딩중인 html

=그래서 코딩중인 html은 항상 css, js, image 폴더 밖에 있어야함

=ex) 01_Basic HTML > 코딩중인 html, css, js, image폴더

여기서 alt는 대체 텍스트로 이미지에 대한 문구를 적으면 낭독기가 읽어줌

이미지 경로가 잘못되어 이미지가 깨져 나오면 이때 대체 텍스트가 함께 나온다

절대경로

=거의 안씀

=ex) c드라이브 경로 마우스로 클릭했을시 항상 C: 으로 시작하는 것

CDN방식(Contents Delivery Nerwork)

=남의 서버의 리소스 가져오기(ex. 픽사베이, 언스플래쉬 등)

=ex) jQuery

인라인 태그(내용)

a01049479039 — 2024-05-30 07:54:26 UTC

br, a, link, img, span, form

웹에서 사용하는 이미지 포맷

a01049479039 — 2024-05-30 08:43:52 UTC

jpg

저장할때마다 손실되며, 확대축소시 계단식으로 깨지는 현상발생

투명배경 불가능

png

투명배경사용하기에 배경색상변경에 용이

gif

해상도가 떨어지며, 용량이 작다

움짤

svg

벡터방식

코드로 만들어진 이미지로 확대축소시 깨지지 않고, 깨끗하게 나옴

목록 태그

a01049479039 — 2024-05-31 06:52:07 UTC

ul(Unorderd List)태그

블록태그

목록 만드는 태그

무조건 자식태그인 li와 함께 쓰인다

목록 앞에 작은 원이나 사각형 블릿이 함께 붙는데, 추후 css에서 안보이게 하는 것이 가능하다

ol(Ordered List)태그

ul태그와 마찬가지로 자식태그로 li를 갖고 있으며 목록을 만드는 태그다

ul과는 달리 목록 앞에 숫자, 영문, 로마자 등의 순서를 알려주는 기호가 붙는다

기본값이 숫자로 설정되어 있는데 ol옆에 type 태그를 붙여

또한 start태그를 이용해 순서의 시작점을 정할 수 있다.

ex) 1234순서를 2345로 변경가능

li태그

항상 ol이나 ul이라는 부모를 가지고 있어야하며, 목록을 작성할때 사용된다

dl(Define List)태그

용어정의형 목록

자식태그로 dt(제목)와 dd(내용)를 가지고 있다

dt는 제목이기에 하나만 올 수 있고, dd는 내용이기에 여러개 올 수 있다

ul이나 ol과 차이를 생각해보면 앞에 블릿이 나오지 않는다는 것 정도인데 이는 css로 ul ol 기본 설정에서 블릿이 나오지 않게 하면 별 다를게 사실 없어보인다

dt태그

dl태그 내에서 dd태그가 정의하는 제목과도 같은 태그

아래 dd태그에 대한 설명과 함께 보면 더 이해가 쉽다

dd태그

굳이 따지자면 dl태그 내의 li와 같은 역할을 하는 태그

예를 들어 ul과 li가 ul-1일차, li-산책하기, li-쑥따러가기 등 연관성 없어보이는 내용을 담을 수 있다면 dl 속 dt와 dd는 dt-개나리, dl-봄에 피기 때문에 대체로 전통적으로 진달래와 함께 겨울이 끝나고 봄이 왔음을 알리는 꽃이다. 처럼 dt를 정의하는 내용을 내포한다

dfn태그

별개로 dfn태그도 있는데 이는 dl의 직계자식이 될 수 없어 dl>dt>dfn 순으로 쓰는 것이 옳다

dfn태그의 역할은 사실 기울임꼴로 나타난다는 것 말고는 굳이 쓸 이유가 있나 싶으면서도 언젠가 쓰지 않을까...

정작 쓸 때는 생각 안날거 같긴한데 그냥 em이나 i태그로 대체가 가능하지 않을까 싶기도 하다

젠코딩

a01049479039 — 2024-05-31 07:13:12 UTC

부모태그>자식태그를 입력하면 부모태그안에 자식태그를 넣어 VS Code에서 자동으로 완성해주는 것을 일컫는다

ex) ul > li 태그 입력시 
태그가 자동으로 입력됨

또한 꺽쇠가 아닌 +를 입력해주면 형제태그를 자동완성해준다

ex) dl>dt+dd 태그 입력시 
태그가 자동으로 완성된다

특정한 태그를 여러개 자동완성하고 싶을때 *를 사용할 수 있다

젠코딩에서 부모관계를 나타내는 >나 형제관계를 나타내는 +는 구분기호로 통칭할 수 있는데 구분기호가 중간에 끼어있다면 구분기호 전까지만 *가 허용된다

ex) dl>dt+dd*4라고 입력하면 
 형식으로 자동완성된다

이때, 앞에 있는 dt까지 4개를 만들고 싶다면

ex) dl>dt*4+dd*4라고 쓰는 것이 옳다

ex 2) dl>(dt+dd)*4도 가능

class나 id도 선택자인 . 와 #로 젠코딩이 가능하다

ex) p.클래스명 or p#아이디명 =  or 이라고 나온다

메뉴의 깊이(death)

a01049479039 — 2024-05-31 07:23:19 UTC

1death, 2death...

death앞에 붙는 숫자는 마우스의 클릭 횟수와 비례하다

2death의 예시로는 사이트의 카테고리가 있는데 카테고리로 한번 마우스로 클릭하고 그 안에 세부 카테고리가 나오는 것을 2death로 본다

위의 코딩 사진은 2death 코딩 예시를 보여준다

첫번째 목록태그(ol) 안에 목록(li)들을 만들어 주고 그 안에 2de또 다시 목록태그(ul)와 목록(li)를 만들어 줌으로써 2death가 완성된다

여기서 ol과 ul의 순서는 순서가 정해져있는지 없는지에 따라 적은 것이기에 2death를 활용하기 위해 항상 ol안에 ul이 들어가야 하는 것은 아니다

1+n death를 만들때에는 되도록 앞서있던 li의 끝에 엔터치고 ul, ol 등을 입력해 이어가주는 것이 헷갈리지 않고 편하다

예시로 위 사진 속

2일차

와 그 안의 ul 목록들 참고

생각보다 이거 헷갈려서 망친 적이 여러번이니 리스트 정리할때마다 한번씩 다시 보자 ... 꼭

style 관련 태그

a01049479039 — 2024-05-31 07:59:37 UTC

border

구조(박스) 테두리

블록태그를 사용했을 경우 그 테두리 범주를 선을 통해 시각적으로 보여줌

padding

안쪽여백을 padding이라 부르며 border로 선을 그려줬을때 내용 글과 선이 처음에 따닥따닥 붙어있을때 padding에 일정 값을 줘서 글과 선 사이의 여백을 줄 수 있다

그냥 padding이라 쓰면 일정 값에 따라 상하좌우로 모두 padding이 들어가지만 padding-left나 padding-right, padding-top, padding-bottom 등을 통해 원하는 곳에만 padding을 주는 것이 가능하다

margin

구조(박스) 바깥 여백을 margin이라 표현하며 기본적으로 코드를 쓰면 다 왼쪽 벽에 붙어서 화면에 나오는데 이때 margin값을 줘서 옆면과의 거리를 주는 것이 가능하다

table태그

a01049479039 — 2024-05-31 08:09:10 UTC

표같은 몇행몇열 구조를 만들때 쓰기 편한 태그로 기본적으로 tr과 td라는 자식태그를 가지고있다

tr태그

가로축, 행을 결정짓는 태그

td(table divide)태그

세로축, 열을 결정짓는 태그

th태그

제목을 쓰는 태그로, 기본적으로 row(가로)형태로 나오는 인라인 태그로 추정

기본적으로 중앙정렬과 굵은 글씨가 디폴트로 세팅되어있다

/*그저 table안에 tr과 td를 활용해 몇행몇열 테이블을 완성하면 블록마다 정해진 기본 사이즈가 있기 때문에 style에서 border를 줬을 경우 첫번째 사진과 같이 나온다

이를 선 하나로 깔끔히 정리하기 위해 border-collapse가 사용되며 아래와 같이 쓸 수 있으며 결과는 2번째 사진과 같다*/

table, tr, td, th{
            border: 1px solid #000;
            border-collapse: collapse;
        }

thead, tbody, tfoot태그

간략히 머리, 본문, 바닥을 의미한다

반드시 적어주어야 하는 것은 아니나 각 영역을 구분지어서 사용하고자 할 때 사용한다

예를 들어 thead나 tfoot 부분만 색상 변경을 하고싶다거나 할때 사용할 수 있다

tbody는 굳이 적지 않아도 개발자도구 내에서 자동으로 생성이 되지만 thead와 tfoot 등을 활용하고자 할 때에는 꼭 적어주어 구분지어야한다

caption태그

테이블의 제목

테이블은 단 하나의 캡션만 정의할 수 있으며, 무조건 table 바로 다음에 나와야함

th태그처럼 가운데 정렬이 기본인 디폴트 값을 갖고 있다

기본적으로 인라인 태그로 추정, 구조를 넣어주고 싶으면 caption태그>p태그>문구 순으로 하면 된다

colgroup태그

colgroup은 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용하며, colgroup 요소 내부에 있는 col 요소를 통해 셀의 너비를 결정할 수 있다

그렇기에 colgroup은 꼭 조정하고 싶은 셀의 갯수만큼 입력해줘야하며, 아래와 같이 너비를 각기 다르게 조절이 가능하다

colgroup도 table 다음에 와야하는데 만일 caption태그가 먼저 와있다면 caption 다음에 써주도록 한다

thead, tbody 등보다 무조건 앞에 와야함

table 코드를 짜며 내용에 따라 셀의 크기가 변화할때 colgroup을 사용해 셀의 너비를 미리 지정해주면 내용이 많든 적든 셀의 크기를 일정하게 유지할 수 있다

colspan

가로로 셀을 합치는 기능을 말하며 셀을 합친 후 밀려난 내용은 지워서 정리해준다

rowspan

colspan과 비슷한 성격을 가지고 있으며 차이는 세로로 셀을 합친다는 것뿐이다

아래는 활용 예시이다

colspan에 3이라고 입력한 이유는 위 tr의 td가 4개가 있기에 보존해두고 싶은 셀 하나를 제외하고 합칠 자기자신 셀 하나를 포함한 3개를 합쳤다

    
        
            이름
            김명철
            연락처
            010-1234-5678
        
        
            주소
            서울시
        
        
            자기소개
            직훈교사

style 활용

border를 이용하여 외곽선을 그려주고 싶을때 style에 th, tr, td등과 함께 table 태그도 border를 표시해줘야한다

안그러면 border-collapse를 해도 선이 일자로 매끄럽게 나오지가 않는다

마찬가지로 border-collapase: collapse;도 table에 적용해주어야한다

이건 계속 이해될듯 말듯 한데 계속 반복학습으로 해보면서 이해하는게 더 빠를 것 같다

CSS reset

a01049479039 — 2024-06-03 08:15:45 UTC

li{list-style: none;}

불릿 없애줌

a{color: in누르고 컨트롤 스페이스 눌러서 inherit;}

링크 걸리면 글자 색깔 바뀌던거 안바뀌게 함

a{text-decoration: none;}

링크 걸리면 글자 밑에 밑줄 그어졌던거 없애줌

img{vertical-align: top;}

이미지 위에서부터 아래로 수직정렬

h1, h2, h3, h4, h5, h6{font-size: 16px; font-weight: normal}

자동 볼드처리되던 hn태그들을 원상태로 초기화하며 마찬가지로 n에 오는 숫자에 따라 글씨 크기가 결정되던 것을 폰트 기본값인 16px로 글자크기까지 초기화

*{padding: 0; margin: 0; box-sizing: border-box}

*은 all을 의미하므로 모든 태그의 padding값과 margin값을 0으로 초기화 시켜버린다

box-sizing에는 content와 border-box가 있다

기본 디폴트 값은 content인데 이는 높이와 너비에 border나 padding 등을 사용했을때 높이와 너비가 각각 10px에 border 1px을 준다면 그거까지 포함하여 각각 총 11px이 된다

이때, border-box를 쓰면 border까지 포함해도 10px 그대로 유지할 수 있도록 만들어준다

.cf(clear fix 줄임말)::after{content: ""; display:block; clear: both}

플롯(float)을 적용한 속성의 부모되는 태그에 클래스명 cf를 달아주어 사용할 수 있다

자세한 설명은 float 담벼락에 적어둠

section태그와 article태그

a01049479039 — 2024-06-03 08:40:34 UTC

두 태그의 기능은 거의 같다 싶을 정도로 비슷하며, article 태그가 조금 더 독립적으로 쓰인다는 차이가 있다

그래서 css를 활용한 움직이는 배너 등을 article로 구성하는 경우가 많다

둘다 main태그 안에 들어가는 여러가지 영역을 지칭하는 태그로 section이 article을 포함하는 조금 더 큰 범위로 볼 수 있다

ex) Queen의 1집(section) 안의 여러 수록곡들(article)

물론 section 대신 article을 쓰거나 article 대신 section을 쓰는 경우도 코딩할때 문제되는 경우는 아니나 개념상 알아두자

Safe area

a01049479039 — 2024-06-03 08:44:45 UTC

모든 기기의 제공하는 화면 사이즈가 다르기에 좌우에 어느정도 여백을 두며 기본 auto값이 들어가는 영역을 의미한다

이 safe area를 가운데에 배치시키는데 사용되는 코드에 대한 설명은 아래와 같다

body안에 div태그를 이용해 id이름을 지어주고, 그 이름을 활용해 아래와 같은 코드로 style에서 활용된다 이때, dom객체방식에 따라 safe area의 기준은 body가 된다

margin은 상하좌우 여백을 의미하고, auto는 좌우만 관할하기 때문에 margin 0을 준 것은 상하좌우 모두 여백을 지정하지 않으며, auto는 가로 중앙에 좌우 여백을 균등하게 준다는 의미다

#wrap{margin: 0 auto;}

속성명을 style에서 적용하려 할 때에 <태그>와 달리 앞에 #을 붙여야 적용된다

시멘틱태그

a01049479039 — 2024-06-03 09:00:57 UTC

html5에서 시작된 태그

의미있는, 고정된이라는 뜻을 가지고 있음

/* 바디의 구성요소

header

주로 로고, GNB메뉴가 들어오는 곳으로 웹에서 가장 상단에 있기에 제일 먼저 볼 수 있는 부분이다

main

수많은 콘텐츠들을 함유하고 있는 부분으로, 이 안에서 section과 article태그들을 활용할 수 있다

footer

보통 웹 가장 하단에 위치하며 회사소개나 copyright 등을 적어둔다

aside

최근 본 상품과 같은 main에 포함되지 못한 이외의 콘텐츠들을 담고 있는 부분으로 보통 화면에 고정시켜서 화면 스크롤을 내리거나 화면의 크기를 줄여도 제일 앞에 작은 크기로 나오게 하는 경우들을 많이 봤다

간단히 기본 콘텐츠와 직접 관련은 없으나 간접적으로 관련된 추가 정보를 포함하는 요소다

nav태그

주로 메뉴, 목차, 색인 등에 사용되며 다른 웹 페이지로 연결하거나(a href태그 활용), 현재 웹 페이지의 콘텐츠 내부로 연결되는 탐색(navigation)을 위한 링크(links)가 있는 영역을 나타냄

그래서 ul>li>a가 자식태그로 들어가있는 경우가 많음

Form태그

a01049479039 — 2024-06-03 09:03:21 UTC

인라인레벨

그렇기 때문에 ul li태그들을 자주 활용함

위의 action은 입력받은 폼 데이터를 처리할 서버쪽 프로그램 파일을 지정하게 하며, method는 데이터 전송방식을 의미한다

데이터 전송방식에는 대표적으로 post와 get이 있는데 이 중 post는 body하고 통채로 묶어서 form action="#"에 써있는 #의 위치로 정보 이동시키는 역할을 맡고 있다

그렇기 때문에 하나의 폼에는 하나의 submit만 올 수 있다

fieldset태그

주변에 사각 테두리가 자동으로 쳐지는 범위형 태그

사진에서는 로그인 정보에서 이어지는 사각 테두리 부분이 fieldset태그로 만들어진 부분이다

화면 읽기 도구(Screen Readers)를 사용하는 사용자들(시각장애인)에게 그룹화된 폼 요소를 명확하게 설명하는 데 도움을 주는 면에서 접근성 향상하는 용도로 사용

legend태그

해당 필드셋의 제목 역할

사진 속 로그인 정보라고 입력되어 있는 부분에 legend태그가 사용되었다

접근성 면에서 fieldset과 함께 사용하기도 하지만 시각적으로 가리고 싶을때 reset.css의 blind 클래스를 함께 사용하기도 한다

textarea태그

문자 작성 영역을 만드는 태그로 cols, rows 요소들로 그 범위 조절이 가능하다 id 요소를 통해 label태그와 연결하여 쓸 수 있다

아래는 그 예시다

메모

label태그

폼 형식의 이름을 명시하는 태그로, 간단히 설명하면 input 앞에 오는 텍스를 의미한다

ex) 아이디 | [               ]
이때 아이디라는 텍스트가 label, 뒤에 [ ]박스가 input으로 만들어지는 부분이라 보면된다

input 태그와 함께 썼을시 웹에서 input태그 부분을 정확히 클릭하지 않아도 label태그에 명시된 부분까지만 클릭하면 텍스트를 입력할 수 있게 한다

input태그

/* 이름과 아이디를 제외하면 최대한 type에 맞게 써주자 */

label이 이름을 명시해주는 태그였다면 input은 보다 기능적인 태그로 input뒤에는 type이라는 요소가 따라오는데 여기에 어떤 속성을 부여하느냐에 따라 역할이 달라진다

비밀번호

input type="password"

비밀번호 입력시 ***으로 뜨게 하여 뭐라고 치는지 안보이게 함

클릭 접근성

input type="text" id="label="#"에 입력된 #"

말그대로 텍스트를 출력하는 것으로, 예를 들어 위에 있던 label태그에서 입력된 아이디 문자를 클릭했을때 [ ]박스 안에 커서가 껌벅이게 할 수 있는 기능을 한다

id도 위 예시처럼 입력해줘야 어떤 문자를 클릭했을때 커서가 작성중인 코드 속 [ ]박스에 올 수 있을지 label태그와 연결해주는 역할을 하고 있다

숫자

input type="number"

모바일에서 위 코드가 입력된 부분 터치시 자동으로 키패드에 숫자패널이 뜨게한다

!! 폼 오른쪽 면에 위아래 화살표가 뜨며 숫자 올리고 내릴 수 있게 하는 버튼 뜸 !! <- 수량 체크할때 좋을듯

전화번호

input type="tel"

number와 같이 숫자패널이 뜨는데, 추가적으로 *,+,#버튼이 함께 뜬다

이메일

input type="email"

숫자+영문 패널이 뜨며, .com을 입력할 수 있는 버튼도 함께 뜬다

검색

input type="search"

검색기능이 생긴다

사이트 주소

input type="url"

사이트 주소를 입력할 수 있게된다

날짜선택

input type="date"

날짜를 지정할 수 있는 달력이 뜬다

파일추가

input type="file"

파일을 추가(업로드)할 수 있는 칸 생성

input태그에 들어올 수 있는 요소들

size

input size="12"

width와 비슷한 태그로 위와 같이 입력하면 [ ]박스의 넓이가 12 정도로 조절된다

step

input step="2"

input 요소에 입력할 수 있는 숫자들 사이의 간격

ex) 수량을 체크할때 : 2, 4, 6, 8 ... 개로만 입력 가능

maxlength, minlength

input maxlength="8"

최대입력가능 수와 최소입력가능 수를 정의하는 요소로 위와 같이 입력하면 최대 8개의 글자만 입력이 가능하다는 뜻이다

autofocus

창 열었을때 가장 먼저 커서가 깜박이게 하고싶은 부분 지정가능

checked

autofocus와 비슷한 속성

창을 열었을때 checked입력해준 값에 체크가 되어있는 상태로 뜨게 함

required

회원가입 같은 것을 할때 꼭 입력해야할 필수 정보들을 입력하지 않으면 넘어가지 않게 한다

autocomplete

문자 자동완성 기능으로 기본값이 on으로 되어있기에 자동완성 기능을 끄고 싶다면 autocomplete="off"로 입력해주면 된다

placeholder

[ ]박스 안에 회색의 연한 글씨로 작성되어 있는 기본멘트를 만들 수 있다 이 기본멘트는 사용자가 박스 안에 문자를 입력하면 자동으로 사라진다

ex) placeholder="비밀번호를 입력해주십시오"

disabled

어원 그대로 시각적으로 코드로 만든 기능들이 보이기는 하되, 기능 작동은 불가능하게 만든다

readonly

한마디로 읽기 전용 속성

복사하고 드래그 할 수는 있지만 외부에서 수정할 수 없고, 눈으로 볼 수만 있게 해둔다

마치 박물관 같은 곳 가면 '눈으로만 관람해주세요' 라는 문구가 생각나게 한다

Form태그 활용 - 라디오 버튼

a01049479039 — 2024-06-03 11:15:18 UTC

input태그 type에 radio를 적용해서 만들 수 있는데 이때, name은 서버에서 찾기 쉽게 같은 이름으로 통일하는 것이 일반적이며, value는 사용자가 만들어진 라디오 버튼을 통해 선택을 했을때 서버에서 인식되는 값을 의미한다

name과 value는 사용자의 화면에는 보이지 않지만 매우 중요하기에 꼭 써주자

위 사진은 전부 인라인 태그이기에 블록태그인 p태그를 통해 구조를 만들어준 모습이다

Form태그 활용 - 정보입력

a01049479039 — 2024-06-03 11:18:17 UTC

Form태그 정리해둔 곳에 있는 모든 것들을 활용한 사진으로 폼 만들기 헷갈릴때 참고용

자세한 태그 설명은 Form태그 정리본에 정리해뒀으므로 생략

CSS(Cascading폭포StyleSheet(엑셀시트))

a01049479039 — 2024-06-04 08:00:00 UTC

link태그로 html과 연결해서 쓸 수 있음

css에서는 ;까지를 한 줄로 인식

style로 하나씩 입력하던 것을 css 하나 만들어 다수의 html 파일에 공통으로 쓸 수 있다

MVC(Model View Controller)패턴

model은 데이타, view은 웹, controller는 제어로 세 부분을 나눠서 작업하는 방식이 적용되어 model인 html은 유지보수시 최대한 건들지 않고, css와 js만을 이용하기에 유지보수가 간편한 면이 있다

CascadingStyleSheet

어원처럼 위에서부터 아래로 읽어내려가기 때문에 오류수정이 쉽다는 장점이 있다

비디오 파일 재생하기

a01049479039 — 2024-06-04 08:05:26 UTC

figure태그

낭독기로 불러주게 하는 태그

접근성 면에서 쓰는 거기 때문에 굳이 쓰지 않더라도 코딩하는 데에 문제는 없다

figcaption태그

figure태그의 제목 역할을 하는 태그

video태그

안에 단일태그인 source태그를 넣어 쓸 수 있다

video태그를 tap했을때 자동으로 가 형성되는데 일반 태그로 쓰고 그 안에 source태그를 넣어 쓰는 것이 일반적인 방식으로 보인다

muted autoplay

muted와 autoplay라는 두가지 속성으로 이 두개를 다 써야 동영상이 자동재생된다

loop

영상이 끝나도 계속 반복재생하게 함

controls

영상을 멈췄다 재생시키거나 원하는 시점으로 옮길 수 있게 해주는 기능

Form활용 - 체크박스

a01049479039 — 2024-06-04 10:52:31 UTC

라디오 버튼이 기본적으로 단일선택이라면 체크박스는 복수선택이 가능하다

그래서 name이 모두 같아야 했던 라디오 버튼과 다르게 체크박스는 name이 모두 같거나 달라도 상관없다

라디오 버튼과 작성방식이 비슷하여 input type에 radio대신 checkbox라고 입력하면 된다

select태그를 활용한 Form구조

a01049479039 — 2024-06-04 11:02:45 UTC

여러 데이터를 드롭다운 형식으로 나열할때 쓸 수 있는 태그로 multiple 속성을 함께 작성하면 중복 선택도 가능해진다(shift+클릭, ctrl+클릭)

작성법은 input과 비슷하다

option태그

나열될 여러 데이터 목록을 작성할 수 있는 태그로 위 사진과 같이 입력시 사용자로 하여금 여러 선택지들을 눈으로 확인할 수 있게 한다

outgroup태그

outgroup태그 없이 select와 option만을 활용해서 만들면 사용자가 일일이 다 스크롤을 내려서 확인해야 하지만 outgroup태그를 사용해주면 클릭 한번에 모든 데이터들을 한 눈에 볼 수 있고, 그 안에 또 option태그를 넣어 마치 n depth처럼 데이터 안의 세부 데이터들 분류가 가능해 가독성이 좋다는 장점이 있다

비디오(유튜브ver.) 파일 생성하기

a01049479039 — 2024-06-04 11:13:51 UTC

video태그를 활용해 동영상을 삽입할 수 있지만 유튜브 영상 또한 삽입할 수 있는데 조금 특별한 면이 있다

iframe태그

유튜브에서 원하는 영상을 오른쪽 클릭해 소스 코드 복사를 해와 복붙만 하면 사실상 끝인데 이때 복붙했을때 자동으로 생성되는 태그가 iframe이다 inline frame의 약자이며 현재는 잘 사용되지 않는다

한가지 조심해야하는건 복붙했을때 자동으로 너비와 높이가 정해져있는데 그 부분을 지워내야 내가 원하는 구조대로 맞출 수 있다

style태그

a01049479039 — 2024-06-05 07:01:35 UTC

일반적으로 캐스케이딩 법칙을 원칙으로 삼기에 같은 선택자로 다른 요소를 입력할 경우 가장 마지막에 쓰인 것이 적용된다

예를 들어 위 사진처럼 .txt_2의 색상이 오렌지로 적었으나 그 밑에 같은 선택자로 색상 아쿠아를 적용하면 덮어쓰기 하듯이 웹에는 아쿠아 색상으로 보인다

전체 선택자

all을 의미하는 *이 전체 선택자를 의미한다

말그대로 모든 태그들에 영향을 끼치는 선택자

요소명 선택자

h1, div 등 일반적인 < 태그 > 들에 직접적으로 스타일을 줄 수 있다

한번에 모든 hn 태그들에 같은 색상을 적용하거나 그런 일이 아니라면 클래스 선택자나 아이디 선택자로 개별 구분지어 사용하는게 좋겠다

클래스 선택자

styel에서 앞에 .을 붙여 사용할 수 있으며, 여러군데 동일한 클래스명을 써 같은 스타일 적용이 가능하다

아이디 선택자

style에서 쓰려면 앞에 #을 붙여야함

클래스가 같은 이름으로 여러군데 붙여서 쓸 수 있는 반면에 아이디는 웹 표준상 한 곳에 한 이름만 붙여 쓴다

여러군데 쓰고 싶으면 클래스 선택자를 사용하자

그룹 선택자

여러개의 클래스나 아이디들을 , 를 이용해 한번에 같은 효과를 주는 것

인라인 스타일(태그 안에 style을 직접 입력하여 쓰는 경우)

인라인 스타일시트 적용하기

가장 우선적으로 취급되므로 style태그 내에서 h2에 다른 색깔을 부여하더라도 예시에 나온 '인라인 스타일시트 적용하기'라고 적힌 h2만은 아쿠아 색상으로 나오게 된다

선택자 우선순위

a01049479039 — 2024-06-05 07:57:52 UTC

전체 선택자 < 요소명 선택자 < 클래스 선택자 < 아이디 선택자 < 인라인 스타일 방식(태그 안에 style을 직접 입력하여 쓰는 경우) < css에 !important 입력해주는 경우

범위가 좁을수록 우선순위가 더 높다

구글웹폰트 사용법

a01049479039 — 2024-06-05 08:27:54 UTC

폰트 저작권 때문에 사용

원하는 폰트를 선택찾는다
오른쪽 상단 위의 get font를 클릭한다(만일 기존에 폰트를 담아 장바구니가 차있으면 get font가 아닌 remove font family가 뜨는데 그거 클릭해주고 get font 해주면 된다)

/* embed 방식 */

get embed code 버튼 클릭해주고 거기서 대신 @import를 눌러준다
Embed code in the of your html 이라고 뜬거 복사해서 작업 중인 html에 붙여넣기

/* 다운로드해서 사용하기 */

get embed code 버튼 대신 그 밑에 download 클릭
폰트 정리해둘 폴더에서 폰트 풀기 C:\강다영\개발자환경구축\font\Noto_Sans_KR\static
static 폴더 안 폰트들 전부 드래그해서 C:\Windows\Fonts 경로에 넣어주기

구글웹폰트 적용법

a01049479039 — 2024-06-05 08:36:31 UTC

구글웹폰트 사용법에 적어둔대로 복사 붙여넣기 한 후

sans-serif

고딕체

import한 폰트에 오류가 생겼을 경우 대체할 폰트

font-family 태그에 적음

serif

명조체

cursive

흘림체

lorem+tap

폰트 적용이 제대로 됐는지 확인용 더미텍스트

폰트 관련 용어 정리

a01049479039 — 2024-06-05 09:25:23 UTC

font

16px

=1em

=1rem

=100%

font+tap했을때

font: 1em sans-serif;

이라고 뜨는데 저 두가지 요소는 꼭 작성해줘야한다

가변형 단위이기 때문에 부모되는 태그의 폰트 사이즈의 영향을 받는다

em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 px로 바뀌어 화면에 표시된다

같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우에는 상위 요소의 폰트 사이즈가 기준이 된다

그렇기에 폰트 사이즈가 px처럼 고정적이지 않고 상위 요소의 폰트 사이즈에 따라 유동적인 면이 있다

rem

em이 상위 요소의 폰트 사이즈가 기준이었다면 rem은 최상위 요소의 폰트 사이즈가 기준이다

HTML에서 최상위 요소는 html태그이므로 html의 폰트 사이즈에 따라 rem의 기준이 정해진다

특별이 지정해주지 않는다면 각 브라우저에서 기본적으로 설정된 값을 상속받는데 16px이 일반적이다

em과 rem의 차이


    동물원
    아기코끼리

예시로 위와 같이 코딩을 했고 #wrap에 20px을 지정해주고, p태그의 폰트 사이즈를 em으로 30px만큼 주고싶다면

30 / 부모인 div#wrap에서 물려받은 20을 해서 1.5em이라고 입력하게 된다

그러나 rem같은 경우 html이 기준이기에 부모되는 div#wrap에서 지정해준 폰트 크기가 20px이어도 특별히 html에 폰트 사이즈 값을 주지 않는 한 기본 값인 16px로 30을 나누어 1.875rem을 입력해야한다

font-weight

font-weight는 100~900 사이의 숫자로도 입력할 수 있다

일반적으로 수치는 아래와 같으며 숫자의 높고 낮음에 따라 폰트의 두께는 bold보다 더 두꺼울 수도 normal보다 얇을 수도 있다

normal

=400

bold

=700

line-height

=행간

기본단위가 em이며 px단위가 아닌 것은 모두 상대단위이기 때문에 어딘가에 기준점(폰트 사이즈)이 있다

행간 계산하는 법 :

폰트 사이즈 x n em

폰트 사이즈의 기준점은 대문자 M을 기준으로 하는데 만일 폰트 사이즈가 30px에 line-height가 1em이라면 M의 위 아래로 각각 15px씩 떨어지게 된다

기본적인 폰트 사이즈가 16px이기에 자연스럽게 1em도 16px과 같겠지만 부모 태그의 폰트 사이즈를 30px로 바꿔주었을 경우

1em은 30px이 된다는 얘기다

color

=rgb

0~f까지 색상의 정도를 나타낸다

0에 가까울 수록 색상이 옅어지고, f에 가까워질 수록 색상이 진해진다

#123456 총 여섯자리의 숫자가 올 수 있는데 각 두자리씩 RED, GREEN, BLUE 를 담당한다

ex) #0000ff 를 입력할 경우 blue 색상이 뜨게 된다

color: rgba를 치면 기존 rgb 영역 외에 alpha라는 게 뜨는데 이 alpha가 opacity를 결정짓는다

@font-face

a01049479039 — 2024-06-10 07:12:20 UTC

알기쉽게 정리해둔 블로거 글 참조

Box modeling

a01049479039 — 2024-06-10 09:03:06 UTC

박스 너비값에 포함되는 속성

width + border + padding

그래서 같은 너비를 주어도 border와 padding 값에 따라 시각적으로 보이는 박스의 크기가 달라진다

이때, border와 padding값을 그 너비에서 빼서 width와 height를 다시 주는 것도 방법이지만 아래와 같은 box-sizing을 통해 border와 padding값이 정해진 너비에 영향을 끼치지 않을 수 있게 할 수도 있다

*{
     /* 박스 자동계산 속성 */
     box-sizing: border-box;
  }

margin

html은 가로 값은 기준이 있지만 세로값은 기준이 없으므로 margin-bottom과 margin-top에 일정값을 줘도 그 위치가 맞물린다면 겹쳐서 둘 중 더 큰 값만 인정된다

한마디로 위아래로 맞붙어 있는 박스 두개에 각각 mb 10, mt 20을 줬다면 두 박스 사이의 margin은 20밖에 벌어지지 않는다

(붙은 다른 박스가 없다면 없는 쪽에는 margin이 붙지 않는다

ex. footer)

반면 html의 가로값 기준은 존재하기 때문에 margin-left와 margin-right의 경우에는 겹치지 않는다

가로로 맞붙은 박스 두개에 각각 ml 10, mr 20을 줬다면 이 두 박스의 margin은 총 30이 된다

margin padding border

세 속성 모두 상하좌우에 모두 적용되므로 margin 0 0 20px 20px로 표현하게 될 경우 시계방향에 따라 상 0 오 0 하 20 왼 20씩 margin이 적용된다

display태그

구조의 성질을 바꿔주는 태그로 인라인레벨인 span으로 이루어진 내용에 block 성질을 줘서 구조를 만들어주거나 반대로 p태그로 적힌 내용을 inline 성질을 줘서 바꿀 수 있다

block

구조(박스)가 생기며 세로로 쫙 나열

inline

구조 없이 가로 한 줄로 쫙 나열

inline-block

block과 inline을 반씩 섞어 block처럼 박스 형태가 생기지만 그 상태로 inline처럼 가로로 쫙 나열됨

그러나 잘 안쓰는 이유는 인라인 블록으로 만든 블록들 사이에 자동으로 3~4px 정도가 떨어져 나오기 때문에 flex를 더 자주 사용한다

가상클래스

a01049479039 — 2024-06-11 07:10:41 UTC

클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를 선택할 수 있다

css를 주기 위해 클래스를 여러개 만들 필요가 없다는 장점이 있다

:nth-child{$}

몇번째 자손을 뜻하며 예시로 li:nth-child(4)라고 할 경우 4번째 li를 뜻한다

앞에 클래스를 써주고 띄어쓰기 한칸 한 후 작성해주면 그 클래스 안의 4번째 li를 뜻하게 된다

링크 가상클래스

a:hover

사용자가 마우스를 가져다댔을때 시각적인 반응 작용

a:focus

(20_가상선택자1.html 참고)

input, a, button과 같이 포커싱 가능한 요소 클릭시 스타일 지정 가능

주로 a:hover와 함께쓰며, a:hover가 마우스를 가져다대는 순간 지정한 스타일대로 작용한다면 a:focus는 클릭했을때 지정한 스타일이 마우스를 옮긴 후에도 계속 포커싱되어 남게 된다

a:active와 다른 점은 a:active가 클릭하는 그 짧은 순간에만 지정한 스타일을 확인할 수 있다면 a:focus는 한번 클릭했다면 다른 곳을 새로 클릭하기 전까지 지정한 스타일을 계속 보여준다

a:active

사용자가 마우스로 클릭하는 순간 보여줄 수 있는 반응

a:link

a href로 링크가 걸려있는 것에만 폰트 사이즈를 줄인다던지 특정 스타일 부여

a:visited

:hover와 보통 같이 쓰며 방문한 링크에 남길 수 있는 흔적

배경이미지

a01049479039 — 2024-06-11 07:56:24 UTC

background-image:

탭코딩하면 사용할 이미지 경로를 입력할 수 있는 url이 나온다

background-size:

배경이미지를 여러 크기로 조절 가능

크기값을 직접 입력하거나, 백분율을 사용할 수도(background-size: 100% 100%;) 있지만 아래와 같이 입력할 수도 있다

contain

정해진 너비에 맞춰 들어가며 원본 너비에 따라 높이값이 조절된다

자연스럽게 덜 채워진 부분은 빈 공백이 없도록 같은 이미지로 계속 채워진다

auto

원래 배경 이미지 크기만큼 표시(기본 값)

cover

지정한 요소를 다 덮도록 배경이미지를 확대/축소

background-position:

x값과 y값을 통해 배경이미지의 위치를 조절할 수 있다

px로 xy값을 입력할 수도 있지만 left, right, top, bottom, center 등으로 위치값을 줄 수도 있다

background-attachment:

배경 고정

주로 fixed와 함께 background-attachment: fixed 사용

주의할 점은 이유는 모르겠으나 background-image 보다 먼저 작성하면 적용되지 않는 모습을 볼 수 있었다

fixed

배경이미지에 특정한 효과를 주며, background-attachment: fixed를 적용하면 background-position에 입력해둔 값에 따라 모니터의 크기와 상관없이 그 위치에 고정시킬 수 있다

background-repeat:

no-repeat

정해진 공간안에 이미지가 다 붙지 못해 빈 공간에 이미지를 반복적으로 채워넣는다

repeat-x

정해진 공간안에 이미지가 다 붙지 못해 빈 공간에 이미지를 가로로만 반복적으로 채워넣는다

repeat-y

정해진 공간안에 이미지가 다 붙지 못해 빈 공간에 이미지를 세로로만 반복적으로 채워넣는다

그라디언트

a01049479039 — 2024-06-11 08:55:47 UTC

background: -webkit-linear-gradient

background: -moz-linear-gradient

background: linear-gradient

위치, 색상, 각도 등을 입력해 원하는 모양으로 그라데이션을 줄 수 있다

선형 그라디언트

background: -webkit-radial-gradient(white, yellow, green);
            background: -moz-radial-gradient(white, yellow, green);
            background: radial-gradient(white, yellow, green);

타원형 그라디언트 예시

background: -webkit-radial-gradient(circle, white, yellow, green);
            background: -moz-radial-gradient(circle, white, yellow, green);
            background: radial-gradient(circle, white, yellow, green);

원형 그라디언트 예시

타원형 그라디언트와 유사하지만 좀 더 원형적인 면이 부각된다

여러가지 선택자

a01049479039 — 2024-06-11 09:43:47 UTC

자손선택자

ex) #wrap ul{}

태그 내 존재하는 자손되는 태그 입력

띄어쓰기로 구분

자식선택자

해당 태그의 바로 직계자식 태그 >(꺽쇠기호)로 구분

ex) #wrap>ul{}

인접형제선택자(첫번째 형제만)

ex) header+p{}

위와 같이 입력하게 되면 같은 형제라인에 있는 header의 가장 먼저 쓰인 p만 지정해서 스타일 줄 수 있게 된다

만일 header 와 형제라인에 있는 p가 많다면 header 바로 옆에 가장 먼저 오는 p태그 하나만 선택됨

인접형제선택자(두번째 형제만)

ex) header+p+p{}

만일 header와 형제인 p들 중 두번째로 쓰인 p만 지정하고 싶다면 위와 같이 쓸 수 있다

형제선택자(모든 형제 선택)

ex) header~p{}

이처럼 입력하게 되면 header뿐 아니라 첫번째 p까지 둘다 스타일 적용이 된다

속성선택자

a01049479039 — 2024-06-11 10:25:38 UTC

속성선택자는 대괄호 안에 입력한다

여러가지 속성들 중 공통분모를 가지고 있는 것들끼리만 스타일을 주고 싶을때 쓴다

=기호 앞에 어떤 기호를 붙이느냐에 따라 공통분모의 조건이 달라짐

=일치

        a[target="_blank"]{
            color: red;
            font-size: 24px;
        }

a 태그 안 속성 중 target="_blank"가 정확히 들어있는 경우에만 색상 빨강, 폰트크기 24px을 준다는 뜻

~포함

        a[class~="portal"]{
            color: blue;
        }

a 태그 안에서 class명에 portal이라는 단어가 들어가는 것들은 전부 색상을 파랗게 한다는 뜻

다만 주의해야 할 점은 class명이 portal poratl1이면 이에 해당하지만 그냥 portal1만 있으면 포함되지가 않음

^=시작하는

        a[href^="http"]{
            color: deeppink;
            font-weight: 700;
        }

a 안 href의 링크 시작이 http로 시작하는 거에만 deepink 색상과 bold체를 주겠다는 뜻

$=끝나는

        a[href$=".net"]{
            color: silver;
        }

a 안 href의 링크 끝이 .net으로 끝나는 경우에만 silver색상 부여

.com이나 .co.kr 같은거로 끝나면 해당하지 않음

*=모두, 값의 일부도 포함

        a[title*="kor"]{
            color: #000;
        }

a 태그 안 title 이름 중 kor이 포함되면 title명이 kor이든 kor-이든 상관없이 해당 속성에 검정색상을 부여한다는 뜻

=일치가 class명이 정확히 portal만 있어야 허용된다면

~포함은 class명에 portal에 부가적인 단어가 붙지 않은게 하나라도 있다면 class="portal portal1 portal2 portalABC" 이런 class명이라도 허용된다는거

*모두, 값의 일부도 포함은 class="portal1"이어도 그 값의 일부가 portal이기 때문에 허용하는 폭이 넓다

float

a01049479039 — 2024-06-12 07:17:51 UTC

float에 적용될 박스들은 너비값을 가져야하며 float을 줬을때 종이 위에 새 종이를 올리듯 가장 맨 앞으로 보이는 기능이기에 항상 딱 바닥에 붙여서 보일 수 있게끔 해줘야한다

부모의 너비가 기준값이기에 예를 들어 float: left라고 입력한다하면 부모의 너비의 가장 왼쪽에 붙어서 시작한다

float 적용할 곳에 항상 부모보다 작은 사이즈의 너비를 부여해야한다

float은 무조건 block요소에만 적용가능

플롯 해제 기능

overflow: hidden;

(01_float레이아웃1.html 참고)

사파리에서 오류나는 경우가 많아서 요즘은 잘 쓰지 않는다

원리는 3D로 접근해 말하자면 float으로 띄우게 되면 float 준 방향대로 정렬 후 z값이 올라가는 것과 같은데, overflow:hidden;을 주게되면 정렬된 그대로 z값만 다시 0으로 내려오는 것과 비슷한 이치다

참고된 html과 사진을 살펴보면 float이 적용된

#container ul li 밑으로는 background color가 주어지지 않았다

그 상태에서 float이 주어진 #container ul li 의 부모되는 #container ul에서 background color가 주어졌는데 이는 본인의 자손세대인 #container ul li에 float이 주어지는 바람에 이 background color가 가려지게 된다

이때, #container ul에 overflow:hidden;을 주게됨으로써 #container ul li에 적용된 float을 따라 왼쪽으로 가로 정렬도 되며, 띄워져 가려졌던 background color가 드러나게 된다

clear: both;

(01_float레이아웃2.html 참고)

여러 개의 섹션에 플롯이 주어지고, 그 중 플롯이 주어지지 않은 것에만 쓸 수 있으며 플롯이 부모되는 구조의 너비를 기준으로 left냐 right냐 등을 따라 쭉 나열될때 양 옆의 플롯에 영향을 받지 않겠다는 의미로 쓸 수 있다

플롯의 특성상 clear:both를 쓰지 않으면 플롯이 적용된 다른 섹션들이 적용되지 않은 섹션을 가리게되는데 clear:both를 쓰게되면 플롯이 적용된 섹션들과 별개로 분리할 수 있다

부모::after

(가상요소 이용)

span과 비스무리하게 만들어주며 모든 섹션에 플롯이 다 들어가 clear:both를 쓸 섹션이 없는 상황이거나 overflow:hidden의 오류가 걱정될때 사용할 수 있는데 말그대로 가상의 섹션을 하나 만들어주어 거기에 clear:both를 적용하는 방식이다

그래서 부모::after를 플롯해지할때 사용하려면 아래와 같은 세가지 요소들이 꼭 들어가야한다

#content::after{
            content: "";
            display: block;
            clear: both;
        }

content: "";는 가상의 박스를 만들어준다고 보면되는데 이때, 우리는 가상의 투명박스를 만드는 것과 같기에 ""안에 아무것도 입력해주지 않는다
부모::after가 인라인 요소인 span과 같은 비슷한 역할을 하기에 구조를 만들어줄 수 있는 dislay: block을 사용한다
그렇게 만들어진 블록레벨의 투명박스에다 clear:both를 적용한다

text-align

a01049479039 — 2024-06-12 08:30:30 UTC

center

입력된 텍스트 가운데 정렬

justify

입력된 텍스트 양쪽 정렬

float 오답노트

a01049479039 — 2024-06-13 10:25:21 UTC

사진 속 구조를 만들때, 섹션 왼쪽, 섹션 가운데, 섹션 오른쪽에서 헤맸었는데 이는 섹션 왼쪽과 오른쪽에만 각각 float:left, float:right를 줬기 때문이다

섹션 가운데 float을 부여하지 않아 섹션 가운데만 body의 배경색인 검정으로 나타났다

또한, 로고영역, gnb영역을 함께 자식으로 가지고 있는 부모태그에 #부모태그::after{이하생략}를 이용해 플롯해지를 해야했으며 마찬가지로 슬라이드 왼쪽과 오른쪽을 가진 부모태그에도 플롯해지를 해야하는 등 한마디로 float이 적용된 것들의 부모마다 다 플롯해지를 했어야했지만 첫번째 줄과 두번째 줄의 섹션이 각각 2개씩이라 웹상으로는 티가 안나 몰랐다

이 오류가 누적되어 세번째 줄에서 막히게 됐던것

포지션

a01049479039 — 2024-06-14 08:11:05 UTC

구조 코딩할때 거의 쓰지 않고, 박스가 겹쳤을때 사용한다

포지션 속성을 박스에 주입하면 위치값(기본 left:0, top:0)을 자

hole =고정적인 구조

relative(유일하게 hole을 갖고 있음)

=단독주택을 갖고 있는 집주인

=본인 구조 유지하면서 시각적으로 보여지는거만 움직임

=구조가 깨지지 않음

구조에 코딩이 되면 자기구역을 갖고 그 구역 위에 건물을 원하는 위치에 마음대로 짓는다고 생각할 수 있다

밑에 다른 구조들이 relative로 코딩된 구조(집)가 움직여도 그 기존 구역 만큼은 못건드린다고 볼 수 있다

그래서 마찬가지로 자기 땅이 있는 static또한 relative로 코딩된 구역에는 들어오지 못한다

absolute

=월세 세입자

=포지션의 기본, 포지션 레이아웃 잡으라 하면 대부분 absolute 쓰면 됨

=구조가 깨짐

=유동적이다

absolute 포지션 값 준거 움직이면 바로 원래 있던 자리를 다른 구조가 와서 채움

포지션 absolute를 쓰면 꼭! 부모태그에 position relative도 써줘야한다

부모 세대 중 relative 적용된 세대를 기준으로 위치기준값이 정해짐

fixed

=월세세입자

나중에 다시 작성

static

relative와 비슷하지만 위치값을 갖지 못함

일반적으로 구조 줬을때 가장 기본적인 값

z-index

박스가 겹쳐있을때 뭐가 더 앞에 올지를 정함

z-index 생략시 자동으로 z-index: 1 기준값으로 적용됨

보통 위계만 맞으면 되기에 z-index: - 9999 이런식으로 값을 주어 절대적으로 밑에 두어 배경값으로 쓰기도 한다

transform: translate();

추후 다시 설명해주신다 하셨는데 대강 구조가 가운데로 옮기기 위해 너비 높이 50%로 이동시켜도 left, top 0인 상태로 구조가 오기때문에 지정한 위치보다 살짝 더 오른쪽 아래로 내려오게 되어 ex) transform: translate(-50%(x값), -50%(y값)); 이렇게 값을 주고는 한다

가상 선택자

a01049479039 — 2024-06-17 10:46:39 UTC

[발췌]가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면, 가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.

:not()

괄호안에 들어가는 특정 요소를 제외하고 스타일 적용

사진과 같이 작성된 것은 #signup에서 input type이 radio가 아닌 것들에만 border색 #ccc 등을 주며, 마우스를 가져다댔을때 border색이 #f00으로 변한다는 뜻이다

해당 예시에서 not()괄호 안에 대괄호가 들어간 것은 다른 담벼락에 정리한 속성선택자 때문이다

간략하게 설명하자면 공통적인 분모를 표현할때 쓰는 속성 선택자는 대괄호를 사용하는데 해당 예시에서는 not으로 제외하고 싶은 특정 요소가 input type이 radio인 것'들'이기에 대괄호가 들어갔다

:target

클릭된 요소들을 구분하기 쉽게 하며, 링크가 활성화된 태그에만 사용할 수 있다

번외)

#signup input:checked+label{}

라고 써있는걸 해석하자면, #signup 자손 태그인 input 요소가 checked되어진다면(:) 그 형제관계인 label이 괄호 안에 부여된 css 디자인 요소를 갖게 된다는 거다

만약 ~~한다면/~ 를 /~~하겠다

이해가 어렵다면 형광펜친 문장에 대입해서 생각해보면 되는데 :not()같은 경우 예시를 참고하면

'만약 #signup의 자손인 input에서 type이 radio가 아니(:not)라면 width를 200px 주고, padding 등에 css적인 효과를 부여하겠다'고 해석할 수 있다

:target을 대입시켜보면 '만약 #signup에서 자손인 input태그에 check되는 부분이 있다면 그 형제관계인 label의 굵기를 bold로 바꾸고, 폰트색상을 빨강으로 하겠다'는 뜻이 된다

3단플롯(오답노트)

a01049479039 — 2024-06-17 11:13:34 UTC

2단 플롯이 각 섹션에 float:left와 float:right 하나씩 기입해주는 것으로 해결을 봤다면 3단플롯은 float:left, float:left or float:right, float:right 이런식으로 세 섹션 다 플롯을 주어 구조를 잡을 수도 있지만 구조가 조금 복잡해질 경우 마치 2단플롯을 처리하듯 두개의 구조를 하나로 묶고 그 안에서 2단플롯식 처리를 하고, 그 하나로 묶인 구조와 남은 구조 하나로 또 2단플롯식 처리를 하는 둥 최대한 복잡하지 않고 간단하게 정리해볼 수 있다

구조가 묶여있는게 플롯에 영향을 끼칠 것을 인지 못하고 저번처럼 섹션 세개에 다 플롯을 부여에 한번에 그들의 부모태그에 ::after를 적용하는 것만으로 해결해보려하니 3단플롯을 주는데 실패했다

참고 자료 : 08_3단플롯오르쉐.html

가상요소

a01049479039 — 2024-06-18 07:53:51 UTC

::after, ::before

해당 가상요소가 붙은 태그 뒤나 앞에 가상의 구조나 효과를 줄 수 있는 요소

transform

a01049479039 — 2024-06-18 09:01:04 UTC

마우스, 키보드가 동작했을 때의 경우를 event(사건)이라 부른다

transform은 마우스 hover하고만 주로 연동함

다른 웹에서 모두 동작하기 위해 항상 앞에 접두어(prefix)를 사용한다

위 사진은 단순히 transform 변화만 보기 위해 첫번째 translate 외에는 적용하지 않은 모습

translate

마우스 hover 했을때 원하는 위치로 이동가능

rotate와 마찬가지로 앞에 음수(-)가 붙으면 기본 오른쪽 방향 이동에서 왼쪽 이동방향으로 변형 가능

x, y 값을 통해 x축, y축 위치 이동가능

translate(n, n);

이렇게 한번에 x, y축을 쓸 수도 있지만

translateX(n);

이렇게 써서 x축 값에만 변화를 주거나

translateY(n);

y축 값에만 변화를 주는 것이 가능하다

scale

마우스 hover 했을때 원하는 크기로 조절가능

기준값은 해당 블럭에 주어진 너비값

x, y 값을 통해 x축, y축의 크기변화 가능

translate와 마찬가지로 scale, scaleX, scaleY를 통해 x, y값에 변화를 줄 수 있다

rotate

마우스 hover 했을때 원하는 방향으로 회전가능

기본적으로 시계방향으로 회전하나 앞에 음수(-)를 붙이면 반시계방향으로 회전

rotateX, rotateY를 사용하면 해당 축을 기준으로 회전한다

skew

마우스 hover 했을때 왜곡(흔히 말하는 사다리꼴 모양) 가능

음수(-)를 통해 왜곡 방향을 바꿀 수 있으며 역시 skewX와 skewY가 있다

VScode 오류

a01049479039 — 2024-06-18 09:16:07 UTC

컨트롤 + / 안될때

컨트롤 +shift 눌러서 [한국어 한컴 입력기]로 설정됨

그 상태로 컨트롤 + / 하면 주석 적용이 안되기 때문에

컨트롤 + shift 누를 상태로 shift만 떼어서 다시 [한국어 microsoft 입력기]로 바꿔줘야함

~library? 같은 창 뜰때

주로 1번 폴더가 아닌 다른 폴더에 새 파일을 적용해 html을 만들었을때 나는 오류로 마우스 오른쪽 클릭해 Stop Live Server를 누른 후 다시 Open Live Server를 해줘야 정상적으로 창이 뜬다

transition

a01049479039 — 2024-06-18 11:16:21 UTC

!!트랜지션 속성은 항상 원본 박스에 코딩해야함!!

transition-property

트랜지션 시키고자 하는 css 속성명(width, height, background-color 등)을 적어주면 됨

아무리 트랜지션 주고 싶은 속성의 원본 박스에 :hover를 줘도 transition-property에 해당 css속성명이 적혀있지 않는다면 그 부분만 변화되지 않음

transition-duration

transition-property에 주어진 속성들이 트랜지션 되는데 걸리는 시간

한줄 표기

원본 박스{

transition: all n(트랜지션 주고 싶은 시간)s;}

여기서 all은 transition-property를 원본 박스에 따로 적어주지 않았을 경우, :hover했을때 준 값 모두 허용한다는 뜻

가상수식

a01049479039 — 2024-06-18 11:23:03 UTC

:nth-child() 같은 가상 클래스에 가상의 수식을 사용하여 특정한 부분만 선택할 수 있다

가상클래스에 ()괄호 쳐서 그 안에 수식해준다

ex)

:nth-child(3)

3번째 자식만

:nth-child(odd)

홀수번째만

:nth-child(even)

짝수번째만

:nth-child(2n+1)

2의 배수+1 값에만

(이 경우 nth-child(3)과 달리 n은 무한하기에 계속 반복되어 돌아온다)

사진 속 빨간 블럭이 :nth-child(2n+1)를 적용한 모습인데 반복되어 돌아와 첫번째 블럭까지 background-color: red;가 적용된 모습이다

공통 클래스

a01049479039 — 2024-06-19 07:29:40 UTC

.cf(clear fix)와 같이 기본 css 코딩을 해둔 상태에서 클래스명만 적으면 바로 적용이 가능하게끔 만듬

transition 속도

a01049479039 — 2024-06-19 07:56:33 UTC

linear

같은 속도로 트랜지션 진행

ease(transition 기본값)

처음에는 천천히 시작, 점점 빨라진후 마지막에 천천히 트랜지션 진행

ease-in

처음에는 천천히 시작

ease-out

끝에 천천히 끝남

ease-in-out

시작과 끝이 느림

애니메이션 작성하기

a01049479039 — 2024-06-19 11:29:27 UTC

transform과 마찬가지로 animation에 관련된 모든 요소에 항상 접두어를 써주어야한다

transition은 마우스 event에 대한 (ex. hover) 사건의 발생이라면 애니메이션은 창을 열었을때 바로 동작한다

추후 animation-delay를 통해 애니메이션 동작 시간을 조절할 수 있다

@keyframes 애니메이션명{from: ; to: ;}

마치 프리미어 프로에서 프레임 별 모션 효과 주던것과 비슷한 원리

애니메이션을 사용할때 꼭 작성해야함 꼭 필요함 꼭..!! 그냥 짝꿍이라 생각하고 같이 외우자

from, to로 효과를 줄 수도 있지만 조금 더 섬세한, 시시각각 변하는 애니메이션을 주고 싶을때 흐름을 %단위로 계산해서 적용할 수도 있다

keyframes 안에는 디자인적 요소만 들어가고, animation관련 요소들은 keyframes가 아닌 꼭 원본 박스에 적어주자

animation-duration

애니메이션 실행시간

접두어써줘야함

animation-name

애니메이션 이름

접두어써줘야함

!키프레임을 통해 애니메이션을 적용시키려면 꼭 애니메이션 적용시키고자 하는 요소에 작성해주어야한다!

animation-direction

애니메이션 실행후,정방향 실행될지 역방향으로 실행될지 결정

접두어써줘야함

animation-iteration-count

애니메이션 반복 실행횟수

접두어써줘야함

animation-delay

애니메이션 지연시간

접두어써줘야함

그림자 효과

a01049479039 — 2024-06-20 10:54:15 UTC

text나 box shadow를 줄때 괄호안에 값을 적을 수 있는데 순서대로 x축, y축, 번지는 정도, 색상을 의미한다

ex) text-shadow: 1px 1px 1px #000;

= x축 1px 아래, y축 1px 아래 내려서 1px수준으로 blur를 준듯 번지는 효과를 주어 검정색 그림자를 만들겠다

기본값이 outset으로 설정되어 그림자가 바깥으로 나있는데 안쪽으로 주고싶다면 inset 사용

ex) box-shadow: inset 0 0 10px rgba(0,0,0,0.3);

text-shadow

텍스트에 그림자 효과를 줌

box-shadow

구조에 그림자 효과를 줌

boder

응용하여 그림자 같은 효과 비슷하게 묘사가능

FTP(File Transfer Protocol) 사용방법

a01049479039 — 2024-06-20 10:57:04 UTC

기타에 적어둔 FTP 관련 주소들 참조

닷홈

https://www.dothome.co.kr/ 닷홈 사이트 들어가기
로그인하기
상단바 웹호스팅 > 무료호스팅
기본사양 신청
기본 개인정보만 수정 후 신청하기 클릭

파일질라

https://filezilla-project.org/ 파일질라 들어가기
Download FileZilla Client 회색버튼 클릭
이어 나오는 같은 초록색 버튼 클릭
다운된거 실행
Avast Secure Brouser뜨면 decline 체크하고 나머지는 다 next 누르기
설치완료되면 위 사진과 같은 창이 뜨는데 거기 상단에 있는 호스트에 내 닷홈 도메인명 적기
사용자명과 비밀번호 입력(닷홈 로그인할때 쓴 아이디, 비번 아님!! 도메인 만들때 쓴 도메인명 앞부분, 비번임. 헷갈리면 함께 첨부한 사진 참고)

파일질라 폴더 정리

오른쪽 리모트사이트쪽 html 폴더만 빼고 다 삭제
html>내 닷홈 주소 쳤을때 바로 나왔으면 하는 index.html 및 관련 css, js, images 폴더 넣기
추가적으로 다른 작업물들 파일통채로 html폴더 안에 넣기(ex. html > css 폴더, images 폴더, js 폴더, 다른 작업물 폴더(안에 그 작업물의 css, js, images 필요! html이름은 자유나 index로 쳐야 주소뒤에 /폴더명만 쳐도 바로나옴. 아니면 /폴더명/index가 아닌 html명까지 적어줘야 뜸), index(바로 나왔으면 하는).html
myunicorn.dothome.co.kr/faq(다른 작업물 폴더명) 입력해서 제대로 폴더정리 됐는지 확인
폴더정리할때 항상 잘못 덮어씌우기 하지 않는지 주의

마이닷홈

ID : rkdekqnd

PW : big902525!

ftp

사용자명 : myunicorn

비밀번호 : big902525!

사용자명2 : myworld

비밀번호2 : big902525!

flex

2024-06-24 08:10:20 UTC

부모박스에 css 속성 코딩

display: -webkit-flex;

display: -moz-flex;

display: flex;

/* 출처 링크에 그림과 함께 자세한 설명 써있으니 헷갈릴때마다 확인해볼 것 */

부모박스에 display:flex가 주입되면

자식박스는 플렉스아이템(플렉스 영향을 받는 박스)로 자동변경되고, 플렉스 아이템이 레이아웃됨

flex-direction

flex 아이템의 방향 설정

부모박스에 설정 => 자식박스에 적용

:row

가로축 정렬(기본값)

:row-reverse

가로축 정렬 but, 가로 방향 바꿔서

ex) div1 div2 div3 => div3 div2 div1

=column-reverse도 비슷함

:column

세로축 정렬

:column-reverse

세로축 정렬 but, 역순으로

flex-wrap

flex 아이템의 줄 배치

줄넘김처리 설정

부모박스에 설정

:nowrap

한줄배치(기본값)

부모가 자식들을 한줄로 나열할 수 없을때 아이템 줄바꿈 없음

:wrap

여러줄배치

부모가 자식들을 한줄로 나열할 수 없을때 아이템 줄바꿈 있음

:wrap-reverse

wrap과 같지만, 역순으로

flex-flow

=flex-direction + flex-wrap

ex) flex-flow: row(flex-direction 속성값 중 하나) nowrap(flex-wrap 속성값 중 하나)

속성값들 사이에 ,콤마 없이 띄어쓰기만 써주면 됨

justify-content

부모박스에 설정

주축방향으로 아이템들 정렬

flex-direction이 row면 가로축을 기준으로 아이템 정렬

flex-direction이 column이면 세로축을 기준으로 아이템 정렬

:flex-start

주축방향 기준 맨 앞에서부터(기본값) 정렬

:flex-end

주축방향 기준 맨 뒤에서부터 정렬

:center

주축방향 기준 가운데 정렬

:space-between

주축방향 기준 정렬하되 아이템들 사이 간격 존재

아이템들 '사이'에만 균일한 간격부여

:space- around

space-between과 마찬가지로 아이템들 양 옆(둘레)으로 간격 존재

특히, 양 끝을 제외한 아이템들은 간격이 겹쳐 양 끝보다 두배의 간격을 가지게 됨

:space-evenly

space-around가 아이템들 간의 사이에서 간격이 두배가 된다면 space-evenly는 모든 아이템들 둘레의 간격을 균일화 시킴

align-items

부모박스에 설정

수직축 방향 설정

justify-content처럼 flex-direction으로 수직축 방향이 변경가능

:strech

아이템들이 수직축 방향으로 계속 늘어남(기본값)

:flex-start

수직축 방향 기준으로 맨 앞에서부터 정렬

jusitfy-content: flex-start도 맨 앞에서부터 정렬하지만 align-items: flex-start는 수직축 기준이기에 flew-direction이 row라면 맨 위에서부터 정렬되고 column이라면 왼쪽에 세로로 정렬된다

:flex-end

수직축 방향 기준으로 맨 뒤(맨 밑=수직축 기준이기에)에서부터 정렬

flex-direction이 row일때 = 맨 밑

flex-direction이 column일때 = 맨 오른쪽

:center

수직축 방향 기준 가운데 정렬

justify-content: center주고, align-items: center 주면 margin: 0 auto와 비슷한 효과 가능

:baseline

텍스트 베이스라인 기준 아이템 정렬

align-self

플렉스아이템에 설정

속성값과 특성들은 align-items와 모두 같으나 align-items가 복수형이라면 align-self는 단수형이라 부모가 아닌 플렉스아이템에 입력해 개별 적용이 가능하다

order

플렉스아이템에 설정

플렉스아이템 순서 변경

ex)

#wrap > div:nth-child(1) {
    background-color: black;
    order: 4;
}
#wrap > div:nth-child(2) {
    background-color: red;
    order: 2;
}
#wrap > div:nth-child(3) {
    background-color: green;
    order: 3;
}
#wrap > div:nth-child(4) {
    background-color: blue;
    order: 1;
}

min & max

a01049479039 — 2024-06-24 11:01:54 UTC

min

해석하는대로 '최소'라는 뜻을 가지고 있다

한마디로 min-height: 10px; 이라고 작성한다면 높이값이 유동적이지만 최소한 10px '이상'은 되어야 한다는 뜻이다

max

min과 반대로 '최대'라는 뜻을 가지고 있으면 max-height: 10px; 값을 주었을때 최대 높이 값이 10px이라는 뜻으로 이때, 높이값은 10px '이하'로만 가능하게 된다

가변적 구조일때 aside를 fixed로 활용하는 법

2024-06-24 11:23:40 UTC

fixed를 주고 top, left, right 등으로 [부모박스 너비% + margin: 0 auto로 반씩 나뉜 남은 여백 중 하나] 값을 줬다

ex. 부모박스 80% + 남은 여백 총 20% 중 반인 10%

img와 background-image의 차이

a01049479039 — 2024-06-25 10:44:29 UTC

img'태그'

=구성

alt="대체메시지" 를 통해 이미지 로딩이 실패했을때 대체메시지 띄우는게 가능
웹에서 마우스 오른쪽 클릭했을때 이미지로 뜸
다른 이미지로 저장했을때 이미지.png로 나옴
프린트 출력시 이미지 나옴

background-image'속성'

=디자인

단순 배경디자인 css적 속성이기에 대체메시지 불가능
웹에서 마우스 오른쪽 클릭했을때 이미지로 인식 못함
다른 이름으로 저장했을때 html 주소 나옴
프린트 출력시 백그라운드 이미지 안나옴

내가 생각해본 img, background-image 사용법

img:

상품 판매 사이트에서 판매하고 있는 상품 사진들

background-image:

설명이 필수가 아닌 것들

홈페이지 배경화면

ex) 뿅뿅이 배경, 그라데이션 색조 배경 등 등

background 한줄쓰기 주의할 점

a01049479039 — 2024-06-25 11:01:08 UTC

background-image는 말그대로 이미지 url만 들어갈 수 있기에

한줄 쓰기를 할때는 꼭 background에 작성

flex: 한줄쓰기

a01049479039 — 2024-06-25 11:02:10 UTC

display의 속성값 flex가 있다면

속성명 flex에 대해 알아보자

플렉스아이템에 개별 설정이 가능하며

너비를 설정할 수 있다

flex-basis

=기본값 auto

=해당 아이템의 width값 사용

=width값이 주어지지 않았다면 콘텐츠의 크기

플렉스아이템의 기본 크기 설정

width, height 보다 우선순위가 높기에 함께 쓰였다면 flex-basis: auto; 준 것이 아니고서야 flex-basis 값 적용

_{width에서 너비값으로 쓰는 단위들 모두 적용 가능}

.item {
 flex-basis: auto; /* 기본값 / 
/ flex-basis: 0; / 
/ flex-basis: 50%; / 
/ flex-basis: 300px; / 
/ flex-basis: 10rem; / 
/ flex-basis: content; */ }

.아이템에 width로 100px을 줬다고 가정했을때 .아이템 속 모든 아이템들이 너비가 100px로 정리된다

(너비가 100이하인거도 100px로, 100이상이었던거도 100px로)

flex-basis에 숫자값(n px)을 줬을때

flex-basis로 .아이템에 100px을 주게되면 너비값이 100px이하인거만 100px로 정의되고 100px 이상이었던 것은 본인이 갖고있던 그 너비값을 유지한다

flex-basis auto일때

원래 플렉스아이템이 갖고 있던 width 값과 height 값 차용

flex-basis 0일때(아예 모든 width, height 값 초기화한다고 생각하면 될듯)

주축에서 content에 주어진 크기 값 상관없이 flex-grow와 flex-shrink에 주어진 비율만큼 너비값 설정

=이유

남은 여백이 기준이 되는 flex-grow와 flex-shrink

flex-basis를 0으로 주면서 정해진 크기가 없으니 당연히 여백이 100%인 상태

따라서 flex-grow와 flex-shrink에 주어진 비율 그대로 너비 결정

flex-grow

=기본값 0

레이아웃에 비해 아이템 너비들의 합이 작아 여백이 남게됐을때 여백을 채워주는 기능

예를 들어 4개의 박스에 각각 flex-grow: 1, flex-grow: 3, flex-grow: 2, flex-grow: 1 로 flex-grow를 줬을때 남은 여백을 기준으로, 만일 100px의 여백이 남았다면 1:3:2:1의 비율로 10px:30px:20px:10px을 너비에 더해 남은 여백을 채우게 된다

flex-shrink

=기본값 1

=기본값이 1이기에 속성을 정의하지 않아도 자동으로 레이아웃이 줄어들때마다 축소함

=너비가 줄어들기를 원하지 않으면 flex-shrink 값을 0을 주면됨

flex-grow와는 반대로 레이아웃에 비해 아이템 너비들의 합이 커 남은 공간이 부족할때 너비를 분배해서 줄여준다

기본원리는 flex-grow와 비슷하게 부족한 여백만큼을 flex-shrink로 정해진 비율대로 나눠 너비를 줄이게됨

flex

_{@n#는 구분을 위해 임의로 적음}

flex: @ n #;

flex를 한줄쓰기하면 이런식으로 속성값을 설정하게 되는데

@자리에는 flex-grow값이, n에는 flex-shrink값이, #자리에는 flex-basis값이 오게 된다

파비콘

a01049479039 — 2024-06-26 10:57:24 UTC

웹 페이지를 대표하는 16x16사이즈의 작은 이미지

#에 파비콘으로 사용할 이미지 경로 입력

이미지 텍스트 & 키 비주얼 이미지

a01049479039 — 2024-06-26 11:05:15 UTC

키 비주얼이란?

웹 페이지의 주제나 분위기에 걸맞은 핵심 이미지

이미지 텍스트란?

텍스트를 이미지화시켜 단순히 글자를 읽는 것뿐만 아니라 디자인적 요소 추가

(ex. 타이포그래피)

보편적으로 [좌] 이미지 텍스트 / [우] 키 비주얼 이미지를 배치시킨다

반응형 웹

a01049479039 — 2024-07-23 07:52:11 UTC

사용하는 전자기기에 따라 웹 페이지가 반응하게 하도록 하며, 기본적으로 모바일, 태블릿, PC 세 분류로 나눌 수 있다

관행적으로

360px 이상 > 모바일

768px 이상 > 태블릿

1024px 이상 > PC

로 볼 수 있으며 고정적인 값이 아니기에 경우에 따라 너비값에 차이가 있을 수 있다

initial-scale=1.0

=눈에 보이는 것이 어떻든 계산은 100% 비율로 계산한다

viewport

=미디어쿼리 계산 기준

반응형 할때 필수 요소

가 html에 적혀있어야함
다행히 위 문장은 !document 기본폼에 미리 작성되어 있는 부분이다
미디어 쿼리 있어야함

가변그리드

px(고정형) -> %(가변형)

계산방법

본인 마음속에 전체 컨테이너의 너비 생각
(%너비 주고자 하는 곳의 px 값 / 전체 컨테이너 너비)*100
- margin과 padding 가변값 구하는 것도 같으나 높이값은 가변형 영향을 받지 않으니 주의해서 사용
- ex) margin: 20px 20%

미디어쿼리:

화면의 크기(=너비)와 기타환경을 감지하여 웹 사이트를 변경하는 기술. 웹 반응형을 적용하려면 디바이스 기기의 종류를 알아야, 그 기기에 맞게 구조를 바꿀 수 있기 때문에 반드시 필요함. CSS3 속성 중 하나임 (코딩시 유의사항) 변화를 주고 싶은 박스 영역만 코딩시 [형식] @media [only 또는 not] 미디어유형 and 또는 , (조건문){실행문 = CSS코드 작성}

미디어쿼리 적용 예시

a01049479039 — 2024-07-23 08:01:45 UTC

너비가 360 이상일때

너비가 768px 이상일때

너비가 1024px 이상일때가 나눠서 작성됐다

기본 미디어쿼리 폼에 따라 @media screen and (){}를 작성

()과 {} 사이에는 띄어쓰기 x
@media 띄고 screen 띄고 and 띄고 (){}

공통 CSS와 너비가 360px이상일때의 배경 컬러와 이미지 너비 %를 동일하게 주어 360px이하의 모바일 기기에서도 360px~767px 사이처럼 동일한 환경 나오도록 조성

이때, section의 text-align가 적용되어 img의 위치에 영향을 끼쳤는데 이것이 헷갈렸었다

text-align이 그저 텍스트 정렬이라고 알고 있었는데 알고보니 text-align 속성이 블록 레벨 요소 내부의 인라인 요소나 인라인 블록 요소를 정렬하는 데 사용된다는 정의가 있었다

한마디로, img는 인라인 요소이니 텍스트(문자열)이 아님에도 불구하고 text-align의 영향을 받은 거였다

미디어쿼리를 적용할때 주의해야할 점은 Top-down 형식을 잘 지켜야한다는 점인데 다 ~px이상일때를 기준으로 css가 적용된거라 예를 들어 마지막 1024px~ 이상일때에 대한 미디어쿼리가 없다면 계속해서 768px이상일때의 스타일이 1024px이상일때도 적용되어 나올 것이기 때문이다

*** ~px이하일때 ***

위에서 min-width를 적용했던 것과 반대로 max-width 적용
Top-down 형식에 의해 ~이상일때 모바일 > 태블릿 > PC 순이었다면 ~이하일때는 반대로 PC > 태블릿 > 모바일

*** ~px이상 ~px이하일때 ***

and 접속사 사용
ex) @media screen and (min-width: 100px) and (max-width: 500px){}
접두사 and 앞뒤로도 띄어쓰기 주의

미디어쿼리 가로, 세로

a01049479039 — 2024-07-24 03:34:02 UTC

사용할 수 있어보이는 곳

휴대폰 가로로 들때와 세로로 들었을때의 화면

orientation

화면의 방향 감지하는데 사용

landscape

=풍경

=가로형식

portrait

=초상화

=세로형식

헷갈렸던 부분

Q. 일반적인 반응형 웹 만들때처럼 기준 너비값을 min, max-width로 정해주지 않아도 괜찮은건가?

A. 세로형식의 portrait만 작성했을때 웹 페이지 크기를 마우스로 세로가 가로보다 크게 만들었을때는 이미지가 잘 나왔으나, 가로가 세로보다 커지면 갑자기 이미지가 사라지는 현상이 있었다

이같은 현상은 반대인 가로형식의 landscape만 작성하고 웹 페이지 크기를 조절했을때 세로가 가로보다 커지가 이미지가 사라졌다

이처럼 너비값의 기준을 따로 정해주는 것이 아닌 세로가 가로보다 더 클때 주고 싶은 style을 적용할때 portrait를 사용하고, 가로가 세로보다 더 클때 주고 싶은 style을 적용할때는 landscape를 사용하는 것을 알 수 있다

*** 너비값 기준x 무조건 가로 세로 기준 o ***

이름	김명철	연락처	010-1234-5678
주소	서울시
자기소개	직훈교사