개발새발

 첫 주에는 각자 간단하게 연습문제를 풀어보기로 해서 문제를 풀고 내가 적은 코드에 대한 해설도 적어봤다. 초기에 배운 것을 복습한거라 어렵진 않았지만 이후에 배운 float, 가상 선택자, position 등 적절한 코드를 활용하여 레이아웃을 잡는 방법이 어려워서 강사님과 함께 실습했던 예제들을 다시 복기해보며 복습했다. 예제들을 다시 풀어보다가 clearfix 부분이 잘 이해가 되지 않아서 조원들의 도움을 받았다.
 또 피그마를 어떻게 사용하는지 간단하게 유튜브를 보고 따라서 학습해봤다. 레이아웃을 잡고 color style, text style 를 지정해보고 auto layout, component 기능을 활용해봤다. 간단한 어플 화면을 만들어 봤는데 편리한 도구들이 많아 큰 어려움을 겪진 않았지만 아무래도 웹페이지 제작을 공부하고 있다보니 핸드폰 화면을 만드는 것보다 웹페이지 화면을 제작해보고 싶은 아쉬움이 있었다. 그래서 추가로 웹페이지를 만드는 유튜브 강의도 보고 따라서 실습도 진행해봤다. 

실무에선 디자인 파일 자체를 주지 않고 피그마나 psd 파일로 줌

1. 재플린

무료는 하나밖에 못 만듦

포토샵으로 만들 때 아트보드 체크할 것

포토샵 상단에 익스텐션-재플린 : 패널 뜰 것, 익스포트 셀렉트(레이아웃 눌러야함) 누르면 해당 목록 뜸, 익스포트 누르면 재플린으로 뜸 재플린에 읽어 들어옴

사진 눌러보면 사이즈나 css, html 코드, 컬러코드 다 뜸 html 코드 뜨더라도 맞는 태그는 각 알아서 해야 함

공유하기 하려면 밖에 나가서 쉐어버튼 누르거나 멤버스에서 이메일 눌러가지고 6명까지 공유

variable name format 은 네이밍하는 법, 각 회사의 네이밍 가이드 있음, 아이디는 카멜 클래스는 케밥 많이 씀

디폴트 벨류 값 해제하기, 체크하면 디폴트 값까지 다 적혀 있어 코드가 너무 길어짐

에셋, 이미지로 다운로드 받으려면 포토샵에서 에셋으로 되어 있어야 함

목록 연거 확인하려면 포토샵에서 레이아웃 복사하고 목록 연 걸로 다시 재플린에 보내야 함

2. 01.html 파일 : 재플린으로 웹페이지 만들기

- 섹션에 헤더 태그 없이 하면 유효성 검사에서 경고 뜰 것, 화면 상에서 안 보이고 싶으면 히든

- 헤더: 플롯 레프트(랭귀지), 포지션(로고), 플롯 라이트(회원가입)

- 헤더에 로고는 h1으로 마크업 하는 게 좋음

- 헤더, 푸터 먼저 만들고 본문 : 어느 페이지든 상단의 헤더와 하단의 푸터는 동일하게 나옴 그래서 매번 다른 페이지에 헤더, 푸터를 만들 수 없으니까 템플릿으로 만들고 가운데를 채우는 식으로

- 목록은 접근성 좋으려면 묶어서 해야 하는데 묶어서 하면 복잡하고 양이 많아지면 어려워서 따로

- 다음으로 넘어가는 동작은 버튼 많이 씀

- css 파일에서 @import url(reset.css); 이렇게 하면 리셋 불러오기

- @import 는 마지막에 세미콜론(;) 안 하면 인식 못함

- .이너 기준으로 .로고에 포지션 앱솔루트

- 플롯을 플롯으로 대응한다 : 플롯한 상위요소의 하위요소에도 플롯을 주면 높이값이 자동으로 잡힘

- .topmenu-area{float: right; padding-top: 8px;} : 패딩 줘도 되는데 백그라운드 색깔이 있으면 패딩값까지 색이 잡히기 때문에 색깔이 있으면 마진으로 해야 함

- height: 27px; line-height: 27px; : 왜 두개를 잡는 건지? 안 잡아도 된다고 함 라인하이트만 줘도 됨

- 부모요소에 사이즈, 웨이트 적으면 자식요소에 상속, 하지만 컬러는 겹쳐

- 재플린에서 글자에 여백이 안 잡혀 있다고 해도 여유롭게 잡기

- 아이콘 최소 사이즈 48, 48 하지만 컴퓨터에는 더 작아도 상관없음

- font-weight: 700; : 폰트 가져올 때 700 볼드 가져와서 700 이라고만 해도 볼드 나옴

- 패딩은 내 요소, 내 여백이라고 인식하고 마진은 밖의 여백이라고 생각. 그래서 앵커에 패딩을 주면 커서 반응하고 마진은 커서 반응 안함

- text-indent: 20px; : 안쪽에 뭐 넣으려면 줄여쓰기 (예: 목록 앞에 리스트 스타일)

- background-color: transparent 은 투명하게

※ placeholder(이메일을 입력하세요) : 컬러 바꾸는 법

※ vender prefix !다시!

.footer-top .mail-box input[type='email']::placeholder{color: #fff;}

.footer-top .mail-box input[type='email']-ms-input::placeholder{color: #fff;} => 벤더프리픽스

3.  재플린으로 웹페이지 만드는 순서

html로 자리잡고(로고는 글자로 대체 후 css 백그라운드 처리) – 헤더 감싸는 위치 잡아주고 – 플롯 처리로 이너 위치 잡아주고 -

!다시!

text-transform: uppercase; → 글자 모두 대문자로

1. 그라데이션 274p~285p ex1.html 파일

생각보다 많이 쓰지 않음

벤더프리픽스 (vender prefix)? 해당 기능이 없어도 사용할 수 있게 해주는 것

Ultimate CSS Gradient Generator 이런 사이트에서 원하는대로 색상 찍고 css 코드 복사해서 붙여넣으면 됨

선형 그라데이션은 접두사를 붙여 사용해야 함

linear-gradient(각도와 방향 지정, 색깔)

색명은 잘 안씀

.box4{background: linear-gradient(to right, red 20%, blue 60%, yellow 80%);}

=> 각 컬러의 위치 지정

.box10{background: repeating-linear-gradient(yellow, red 15px);}

=> 반복 283p *포토샵에 직접 찍으면 패턴으로 보이지 않기 때문에 직접 입력, 색깔을 겹쳐서 선처럼 보이게

원형은 찍는 위치를 지정 원의 구심점 지정 점원, 타원 가능

벤더프리픽스 적용한 그라데이션

- background: -webkit-radial-gradient(20% 20%, circle, #f00, #ff0);

- background: -moz-radial-gradient(20% 20%, circle, #f00, #ff0);

- background: -o-radial-gradient(20% 20%, circle, #f00, #ff0);

- background: radial-gradient(20% 20%, circle, #f00, #ff0);

=> 마지막 줄은 표준 문법 코드

파다스트 코너 가장 먼 변이 사이드

크로지스트 코너 가장 가까운 변이 ?

.box6{background: -webkit-radial-gradient(20% 20%, circle closest-corner, #f00, #ff0);}

      .box7{background: -webkit-radial-gradient(20% 20%, circle closest-side, #f00, #ff0);}

      .box8{background: -webkit-radial-gradient(20% 20%, circle farthest-corner, #f00, #ff0);}

      .box9{background: -webkit-radial-gradient(20% 20%, circle farthest-side, #f00, #ff0);}

2. 글꼴 font-family ex1.html 파일 필기

글꼴은 해당 폰트가 있어야 적용가능 *프로젝트 할 때 저작권 때문에 나눔고딕 본고딕  많이 씀

웹폰트 219p

없는 글꼴 서버에 폰트를 연결하고 브라우저에 연결하도록

ttf : 트루타입 용량 큼, 가장 오래된 글꼴 타입

otf : 오픈타입 용량 큼

주로 씀 woff : 웹오픈폰트

주로 씀 woff2 : 웹오픈폰트2

주로 씀 svg : ?

eot : ex 브라우저 아주 낮은 버전 대응용으로 사용 거의 안씀

converter 변환기로 변환해서 사용

나눔이나 구글은 다운로드 받아서 설치해서 쓰면 됨

글꼴명은 아무거나 써도 됨 그 경로에서 가져온 글꼴을 명명한다는 뜻 포멧은 안적어도 상관없는데 제대로 안 적으면 렌더링 안됨

@font-face {

        font-family: "nanum";

        src: url(font/NanumGothic.woff) format("woff") , url(font/malgun.woff) format(woff);

      }

컴퓨터에 있는 것 먼저 쓰고 싶을 때 로컬 쓰면 됨, 폰트 정확히하고 대소문자 구분

@font-face {

        font-family: "noto";

        src: local("NotoSansKR-Regular") , local("NotoSansKR Regular"), url(font/NotoSansKR-Regular.woff) format("woff");

      }

구글 폰트 사용

link : css 밖으로 내부 css

import : css 안으로 인라인 많이 씀

스타일에 @import url(https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap);

??sdn 이라고 함 컨텐츠 네트워크의 약자??

Light 300 Italic, Regular 400 Italic 같은 스타일도 따로 지정해서 설정할 수 있음

225p font : 글꼴 속성을 한꺼번에 묶어 표현하기 (잘안씀)

3. 이미지 맵 117p 01.html 파일 필기

이미지에 링크를 거는 것, 이미지 하나에 앵커 태그 하나

사진에 여러가지 링크를 걸고 싶을 때 이미지 맵을 씀

바디 태그 안에 쓰기

<img src="img/sb1.jpg" alt="프로모션" usemap="#sb1">

<map name=""  >

  <area shape="" coords="" href="" alt="">

</map>

- coords : 대각선 좌표를 잡아주면 rect로 잡음 왼쪽에서 px, 위에서 px

피그마 그림판 포토샵 같은 프로그램으로 해당 영역 얼마인지 보면 됨

그림판 왼쪽 하단에 몇 픽셀인지 그림 위에 커서 대면 나옴

usemap=" " 에 #map name 적음 됨

- poly : 점점을 직선으로 연결해서 입력

- circle : 원형

- rect : 사각형

제너레이터 maschek 이용하면 편하게 설정할 수 있음 설정 후 하단에 코드 누르고 복사하면 됨

제너레이터는 크롬으로

spritecow 는 이미지 안에 원하는 이미지만 뽑아서 사용할 때 이용

- 한 장에 여러 개 있는 이미지(로고나 아이콘 같은 거) 불러올 때 양식:

           div{background: url('img/sprite__common.png') no-repeat -605px -156px;

           width: 53px;

           height: 54px;}

4. 폼 태그 133p !많이 씀!  02.html 파일 필기

폼: 데이터를 입력 받는 것 로그인 창 같이 화면에 보여주는 게 아니고 데이터를 받아서 사용하기 위한 부분, 회원가입이면 회원가입을 작성하는 부분 같은 것, 아이디 비번 적으면 회원 데이터 베이스에서 확인하고 통과하면 로그인 하도록

form 안에 fieldset 안에 legend하고 ul li 안에 label, input

<form name="frm1">

    </form>

label 은 해당 이름 적고 input 이 해당 이름의 칸?을 생성함 양식은

- <label for="userId">아이디</label><input type="text" id="userId" placeholder="아이디는 이메일 형식입니다" maxlength="10">

fieldset 은 꼭 있지 않아도 됨 회원가입 양식 만드는데 개인정보, 결제정보 등 나눠져 있으면 필드끼리 묶여 있을 때 사용 레전드 범내? 를 각 제목을 설정할 수 있음

<input type="text, password, e-mail, "> 타입 설정 인라인이지만 예외로 높이 넓이 설정 가능 바깥에 아이디 등 써놔도 되지만 음성으로 그게 그건지 읽지 모르기 때문에 속성에 넣어주기

name은 안 써도 상관 무 자바에선 다른 게 있음

placeholder : 칸 안에 뭘 적어야 하는지 설명 쓸 수 있음

maxlength="10" : 칸 안에 10 글자 이상 못 쓰도록

#userId{size: 150px; height: 50px;} 스타일로 칸 크기 설정 가능

input 속성 143p :

<input type="file"> 파일선택 창, 모양 바꾸기 어려움

<input type="email" id="userMail"> 이메일, 유효성 검사 자동으로 됨

checked 는 체크된 상태로 출력

체크박스 모양은 라벨 없애고  비포로 백그라운드 이미지

select, option 으로 선택 박스 생성

버튼 생성하기:

<input type="submit" value="제출하기"> 회원가입 완료 등 다른 페이지로 옮겨짐,

        <input type="reset" value="취소하기"> 입력했던 것 싹 다 삭제

        <input type="button" value="버튼"> 그냥 버튼의 기능

        <button>버튼릭</button> 타입 없지만 기본이 submit, 타입 설정 가능

<input type="email" id="userMail" required> 하면 무조건 작성해야 넘어갈 수 있도록

<input type="text" readonly placeholder="이메일 어쩌구"> 하면 눌러지기만 하고 작성은 안됨

<form name="frm1" action="ex.php"> action 을 작성하면 제출하기 버튼 누르면 해당 페이지로 넘어감

03.html

display: inline-block; 은 블록으로 처리하되 인라인처럼 수평으로 놓고 싶으면 적용, 하지만 사이 공백이 생기기 때문에 붙여놔야 한다면 사용x

5. 시멘틱 태그 04.html 파일 필기

의미가 있고 목적이 있는 태그,

header : 헤드 부분

footer : 푸터 부분

 위에 두개는 div 랑 똑같지만 의미와 목적이 있음

main : 이 태그는 익스 12부터 지원이라 잘 안씀

04.html 파일 필기

최소 해상도 최저 사양의 모니터를 위해 1200px 기준 맨 끝이 안보여도 상관없도록

text-indent: -99999px; 글씨 안보이게

패딩이 값이 들어가 있으면 포지션은 패딩 빼고 적용됨

header .search-box input[type="text"]{} 속성선택자, 인풋 태그에서 많이 씀 아이디도 많이 씀

검색창에 클릭하면 아웃라인이 뜨는데 아웃라인 넌 해주면 됨

반응형이면 앵커에다가 백그라운드 주기

앵커 태그와 하이 태그는 겹쳐 쓸 수 없음????

1. 글자나 공간을 가운데 정렬하기

box-sizing 328p

boder: border+padding 값

블록 요소들은 text-align 으로 안 맞춰짐

2. tab 만들어보기

겹치게 하려면 position:absolute 해줘야함

보통 dl dt 많이 쓰지만 간단하면 div 로

이렇게

<div class="tab-box">

        <dl class="tab">

            <dt>1</dt>

            <dd><img src="img/tab1/1.jpg" alt=""></dd>

            <dt>2</dt>

            <dd><img src="img/tab1/2.jpg" alt=""></dd>

            <dt>3</dt>

            <dd><img src="img/tab1/3.jpg" alt=""></dd>

        </dl>

    </div>

이미지는 인라인이지만 예외로 넓이값 지정가능

3. 02.html 파일 필기

.depth1>a 이건 자식요소 a 를 부르겠다는 뜻

.depth2 a 이건 하위요소 a 를 부르겠다는 뜻

.depth1:hover>a 이렇게 해야 하위요소에 커서를 대도 전체로 선택됨

.depth2 a:hover 이건 li 와 크기 똑같기 때문에 이렇게 li 에 적용해도 됨

특정 넓이가 들어가야 하면 하위에 꼭 넓이 부여해야함 200px

.depth1:hover>.depth2{display: block;} 뎁2를 기본 none으로 하고 뎁1에 호버하면 뎁2를 블록처리한다는 뜻

4. 03.html 파일 필기

글자수가 많이 다른 탭을 만들면 마진을 주면 공간의 여백이 달라서 맞지 않음

04.html 스타일 안잡힘 다시!

같은 자리에 나타나게 하려면 gnb에 포지션 렐러티브

하위 메뉴에 포지션 엡솔루트를 주면 겹쳐짐 그래서 전체 메뉴에서 포지션 렐러티브를 줘야 함

.gnb .depth1 에 position: relative 를 넣어도 되지만 그러면 각 메뉴 기준으로 위치가 잡히기 때문에

.gnb 에 position: relative 를 잡아야 전체 메뉴 기준으로 위치가 잡힘

5. transform, transition

transform 449p : 값을 줘서 이미지 같은 것을 크기 조절, 위치 조절 등

변하는 것

transition

.box2:hover>div{transform: translate(50px,50px); transition-property: transform; transition-duration: 1s;}

=> 1초 기다렸다가 움직이라는 뜻

변하는 중간단계를 보여주는 것, 속성명을 지정해야 함 transition-property: background; 대상을 지정해줘야 원하는대로 변함 대상도 지정하고 각 듀플리케이트나 딜레이 등의 값도 지정해주어야 함 하나 지정하면 두 값 전체가 변하고, 두 값을 1s, 2s 이렇게 지정하면 각각 속성값이 적용됨

예: transition-property: background width; transition-duration: 1s; => 이렇게 하면

timing-function 해주면 진행상황과 타임에 따라 변하는 과정을 보여줌 cubic-bezier(.17,.67,.83,.67) 라는 걸 적용하면 통통 튀는 것을 연출 가능

박스보다 컨텐츠 넘어가는 걸 안보이게 하고 싶으면 overflow: hidden; 설정해야 함

transition: all을 하거나 property 값을 지정하지 않거나 all을 지정하지 않으면 요소의 모든 속성이 트렌지션 대상이 됨

transform-origin

변형 기준점은 원래 중간, 이 속성은 기준점 설정하는 것

6. border-radius 모서리를 둥글게

div:nth-of-type(4) {border-radius: 80px 80px 0 0}

=> 왼쪽 상단부터 수치 잡음

div:nth-of-type(3) {border-radius: 50px 30px;}

=> 대각선으로 왼쪽 상단, 오른쪽 하단이 50px, 오른쪽 상단, 왼쪽 하단이 30px

전체 넓이의 반이 반지름? / 이미지 파일은 무조건 overflow:hidden 처리해야 둥글게 보임

7. 그림자 처리 box-shadow 312p

속성은 따로 쓰지 않고 값만 나열하면 됨

번짐정도는 안해도 상관 없음

inset 은 안쪽 기본은 outset

색상은 rgba 많이 씀

텍스트는 inset 적용 안됨

다시 확인할 것: 이미지 멀티로 깔기?????? 270p 다시 확인, background 속성값 넣는 법 확인

1. clear: both

위에 있는 형제 요소들이 플롯 되었을 때 풀어줄 때 씀

자식요소가 플롯 되었을 때 부모요소의 높이가 0이 된다.

1) 부모요소에 높이값을 정해준다

2) overflow: hidden 이용

3) .clearfix 클래스를 만들어서 사용

주로 2,3 번 많이 사용

1번은 줄 수 있는 요소와 없는 요소 있음, 높이값을 정해줘도 후에 자식요소의 크기가 더 커져버리면 소용이 없음

2. overflow

이 속성을 주면 높이를 따로 주지 않아도 알아서 높이를 지정함 상위요소가 알아서 하위요소의 높이를 계산해서 넣어줌

-hidden: 넘치면 나머지 숨겨버림

-scroll: 넘치지 않아도 스크롤이 있음

-auto: 넘치지 않으면 스크롤이 없음

-visible: 넘쳐도 넘친 채로 나머지를 보여줌

.clearfix 설명을 위해 가상선택자를 알아야 함

3. 가상선택자 437p pseudo선택자

가상 클래스는 코드 적을 때 : 하나, 가상 요소는 코드 적을 때 :: 두개

link 가상 클래스

a:link{color: black;} : 클릭하기 전 색깔을 블랙으로

a:visited{color: red;} : 클릭하고 나서 색깔을 레드로

a:hover{background-color: red;color: white;} : 마우스를 갖다대면 백그라운드는 레드, 글자 색깔을 화이트로

a:active{color: burlywood;} : 클릭할 때 색깔을 불리우드로

개발자 검사 모드로 들어가서 강제실행 상태 들어가보면 호버가 어떻게 사용되는지 보여줌

가상요소 after, before :: 은 하나만 해도 나오긴 함

소스에는 없지만 화면 상에서만 보이게, 대상 요소의 가장 첫번째나 마지막에 적용

::after – 대상요소의 마지막 자식으로 추가

::before – 대상요소의 첫번째 자식으로 추가

::after{content:”속성값”; display:block;width:20px;height:20px;}

content 무조건 줘야 하지만 비어 있게 하고 싶으면 속성은 주고 “” 비워 놓으면 됨

블록을 넣고 싶을 때는 백그라운드 컬러, 디스플레이 블록, 높이, 넓이 주면 됨

4. css 적는 법

블록태그 안에 하위 태그로 블록 태그 가능

블록태그 안에 하위 태그로 인라인 태그 가능

인라인 태그 안에 하위 태그로 인라인 태그 가능

인라인 안에 블록 태그는 안됨 (예외 > a 태그)

외부 css 만들고 @charset "utf-8"; 적어주기

안 적어줘도 되지만 안 적어주면 주석처리한 한글이 다 깨져서 나옴

inherit 상속이라는 값 (a 태그는 기본적으로 설정)

하위요소의 컬러가 정해져 있어도 상위요소의 컬러를 상속받음

5. 초기화

초기화 시키고 시작

/*초기화*/

h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p{margin:0;padding: 0;}

li{list-style: none;}

a{text-decoration: none;color: inherit;}

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

body{line-height: 1;}

table{border-collapse: collapse;}

.cf::after{content: "";display: block;width: 0;height: 0;clear: both;}

에릭마이어 리셋은 오래됨 – 무조건 초기화, 그래서 브라우저마다 조금씩 차이가 있는데 그걸 초기화

노말라이즈도 조금 오래됨 – 평균화,

각자 취향이 있어서 알아서 쓰면 됨

6. 실습 필기

nth-child(3n) : 3의 배수 번째를 처리

nth-child(3n-1) : 3의 배수의 -1 번째 처리 / +도 가능

폰트사이즈 상관없이 글을 두줄로 맞추고 싶을 땐 p 태그로 나누거나 br 태그를 사이로 넣어 끊어주던지

address 태그는 기본이 기울기로 보통 저작권 표시할 때 많이 씀, block 태그

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

    <link rel="stylesheet" href="css/04.css"> = 이 순서 지킬 것

position 341p

absolute fixed는 마진 오토 안됨

#box2>div:nth-child(3){position: absolute;background-color: aqua;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;} -> 이렇게 퍼센트로 지정해주는 게 더 좋음

1. 표 만드는 태그 75p

table tr td th

caption 제목 필요 하지만 없앨 수 있음(적기는 해줘야 함)

합계는 티풋

구분=나누기 구분x=나누지 않아도 됨

티바디로 묶어줘야 하지만 제목이 없으면 안 묶어도 됨

제목에 해당하는 칸

row 행 가로 / col 열 세로

border-collapse: collapse; = 떨어진 줄을 한줄로, 기본이 세퍼레이트, 테이블 태그에 붙여야 함

 table 표 만드는 태그

caption 제목 행

tr th class=col 맨위, 행으로 설정, 굵게

tr td 밑에 행들 설정

scope 웹 접근성 위해서 음성 파일로 읽어줄 때 해당하는 행, 열로 읽어주라는 뜻

span 합치기 [ colspan=2 ↓↓ 2개 합쳐짐 ] [ rowspan=2 → 2개 합쳐짐]

→

.free-bbs caption{display: none;} = 제목 안보이게

테이블 대상해서 선택하기

-대상요소(선택자 앞에) : 붙이고 nth-child(n) = n 번째 자식 / 예) .free-bbs td:nth-child(2)

-대상요소:first-child = 첫번째 자식

-대상요소:last-child 마지막 자식

예) .free-bbs th:last-child

상위요소 하위요소 421p, 자식 손자 형제요소,

스타일

.timetable2{width: 500px;height:200px;border: 1px solid black;border-collapse: collapse;}

        .timetable2 td,.timetable2 th{border: 1px solid black}

테이블

<table class="timetable2">

        <caption>

            <strong>modern browser</strong>

            <p>국내에서 자주 사용하는 모던 브라우저</p>

        </caption>

        <tr>

            <th scope="col">브라우저</th>

            <th scope="col">제조업체</th>

            <th scope="col">다운로드</th>

        </tr>

        <tr>

            <th>크롬</th>

            <th>google</th>

            https://www.google.co.kr/scope

        </tr>

        <tr>

            <th>파이어폭스</th>

            <th>mozila</th>

            <th>http~</th>

        </tr>

        <tr>

            <th>엣지</th>

            <th>microsoft</th>

            <th>http~</th>

        </tr>

    </table>

셀 합치기

<td colspan="2"></td> 행 합치기, 해당하는 나머지 행들 다 지우고 colspan=”합치는 수”

<td rowspan="2"></td> 열 합치기, 해당하는 나머지 열들 다 지우고 rowspan=”합치는 수”

*지우는 위치는 상관없음

thead, tbody, tfoot 83p

colgroup 86p – 행 또는 열 그룹 지어서 스타일 꾸미기, col 하나당 열 하나, 인라인 style

헤드 바디  풋? 튜터? 는 없어도 됨 뭔뜻?

나는 col만 적었는데 row 라고 안 적어도 작동 되는 이유?

2. css 레이아웃

css 포지셔닝

float 위치 정해주기, 위치 지정해주면 떠 있는 것이기 때문에 그 자리가 비어서 끌려 올라가 겹쳐짐 대신 빈자리에 플롯해주면 겹쳐지지 않음/ 양역 안에 컨텐츠 겹칠 수 없음/ 리스트 수평으로 만들기 위해 레프트 또는 라이트 플롯 씀/ 컨텐츠는 겹쳐지지 않아 겹치지 않아보이지만 겹쳐 있음/ 위에 있는 요소 비어있기 때문에 끌려옴/ 부모요소는 자식요소만큼의 크기를 가짐 근데 자식요소들이 플롯되면 다 떠버리니까 부모요소가 없어짐(부모요소에 높이를 주면 부모요소 다시 생김)

- clear 속성은 위에 있는 걸 플롯 시키면 끌려올라가니까 그걸 끌려오지 않게 함. clear both 하면 겹쳐지지 않음

앵커 블록처리 display: block; 모바일은 무조건 적용

position

flex

grid

* tip!

- *{margin: 0;padding: 0;} 여백을 없앨 때, 초기화 시킬 때  컨텐츠 밖 여백이 아예 사라짐 따라서 가운데 정렬하고 싶으면 이 코드를 쓰고 컨텐츠에 margin: auto 처리하면 됨

1. CSS와 박스 모델 

컨텐츠가 들어가는 영역, 여백, 보더, 영역선 : 박스모델

디스플레이 속성: 화면에 어떻게 진열할건지 결정해주는 것.

-블록 레벨 요소: 디스플레이가 블록이라고 정해져있는 태그, 공간 안에 삽입, 넓이를 주지 않으면 자기가 속한 공간에 왼쪽부터 오른쪽 끝까지 자기의 블록이라고 생각, 높이 지정하지 않으면 컨텐츠만큼 블록 차지, 전체 브라우저가 자기 공간 따라서 다른 블록과 인라인이 수평으로 올 수 없음

-인라인 레벨 요소: 디스플레이가 인라인이라고 정해져있는 태그, 행 안에 삽입, 공간(블록)이나 영역을 쓸 수 없음, 높이와 넓이 지정해도 적용x, 한 행에 여러 개 수평 배치 가능

예: display:block, inline / h1{border:1px solid red; width: 500px; display:block;}

박스모델:

div 태그 = 공간을 나누는, 태그 영역을 만든다는 태그. 영역이기 때문에 딱 보이지 않음

검사해보면 제일 하단에 박스가 뜸. 거기서 마진(기본 여백)은 외곽선(border) 밖, 패딩은 외곽선 안. 패딩 상하좌우에 직접 숫자 입력해 여백 부여 가능 하지만 거기는 컨텐츠가 들어갈 수 없음. 맨 안쪽 박스는 컨텐츠. width가 없으면 오토 = 여백을 주면 그만큼의 공간을 남겨두고 나머지는 자동으로 넓이 설정->블록 / 인라인은 다른 박스모델과는 다르게 좌우 마진만 적용됨

2. 패딩과 마진 적는 법: 315p, 상단부터 시계방향으로 적용, 패딩 오토x,

마진 오토 있음-상하좌우 모두 똑같이 공간을 줌 단, 넓이가 있어야 여백을 나누기 해서 똑같이 공간을 줌 꽉 차 있으면 나눌 수가 없기 때문에

바디는 컨텐츠의 양 까지를 높이로 지정

margin:50px 10px 30px 20px; = 네 군데 적용

        margin:50px 10px 30px; = 세 군데 적용

        margin:50px 10px; = 두 군데 적용

        margin:50px = 네 군데 통일 적용

        margin:50px; margin-top:10px 이면 top을 다시 설정했기 때문에 top 10px

예외적으로 img 태그는 인라인이지만 넓이높이 적용

3. 실습

*{margin: 0;padding: 0;} = 마진패딩 초기화

<a> #는 값이 없는 링크

html 전체 선택 *

padding:50px

<style>

*{margin: 0;padding: 0;}

body{background-color: #ccc;}

.box{width: 500px;background-color: #fff;margin: auto;padding: 50px;border-bottom: 1px solid #ccc;}

.title{text-align: center;margin-bottom: 20px}

.des{text-align: justify;line-height: 1.7;font-size: 14px;}

.morebox{text-align: right;margin-top: 20px;}

.more{color:tomato;font-size: 12px;text-decoration: none;}

.title img{} = 하위 요소 동시에 자식 요소, title 밑에 img를 부른다는 것, 띄어쓰기 하기

.list2>span{} X 하위 태그로 적어야 함, .list2>li>span{} O

여러 개 묶어서 하려면 , 하면됨 .list,.list2,.list3

list 태그들은 bullet 이 바깥쪽으로 점프한 것이기 때문에 패딩 레프트를 줄이면 없어져 보임

.wrapper{font-size: 15px;text-align: center;color: black;background-color: #ff4500;border: 2px solid red;padding: 30px 30px;width: 834;line-height: 21px;}

폰트 사이즈, 가운데 정렬, 폰트 컬러 지정, 배경색 지정, 테두리 크기 종류 색깔 지정, 패딩 상하 좌우 넓이 지정, 와이드 넓이 지정,

4. 목록 스타일 247p

배경 색과 이미지

백그라운드는 보더부터 표시 보더가 없으면 패딩부터 패딩이 없으면 콘텐츠만 마진만 빼고

백그라운드 이미지 디폴트가 패딩,

백그라운드 오리진은 시작점 잡아주는 것

백그라운드 클립은 배경 적용 범위 조절

백그라운드 클립을 콘텐츠 박스로 하면

포지션은 위치를 원하는대로 잡을 수 있음 예: right 10px bottom 50px 백분율도 가능

리피트는 반복

사이즈 테두리에 딱 맞게 하고 싶으면

터보는 백그라운드 사이즈 축약 안됨 앞포지션

비포 에프터 백그라운드 설정

5. 목록 만들기 젠코딩: ul>li*5

알트 쉬프트 컨트롤 동시에 누르고 키보트 화살표 아래 누르면 다 같이 적용 = 알트 누르고 마우스

스프라이트 이미지: 랜더링 빠르도록 한 이미지에 넣고 불러오기 하는 것

HTML

1. html이란

hypertext markup languege의 줄임말로 하이퍼텍스트를 마크업하는 언어

하이퍼텍스트=웹사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능

마크업=태그를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것

즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML

2. 준비

웹페이지에서 마우스 오른쪽 클릭, 요소 검사 = 개발자들이 보는 화면

Extensions = 편리하게 쓸 수 있는 기능 추가, 기본적으로 Live server, color highlight, Material Icon Theme 설치

효율성 있게, 의미있게(시멘틱) html 만들기 힘듦

html은 구조를 만들고 위치, 컬러 등 꾸며주고 표현해주는 것은 css

html5 버전 기준

3. 태그

대소문자 구분 안하고, 보통 소문자로 통일

<html> 여는 태그, </html> 닫는 태그, 단독 태그 있음

단톡 태그는 <br>, <br /> 두가지 방법 있음 html5는 / 없이 해도 됨

4. HTML 파일 만들기

파일명은 한글x, 띄어쓰기x, 띄어쓰기 사용하고 싶으면 _ - 사용

회사마다 쓰는 파일명 규칙 다름

대소문자 섞어 쓰지 말고 소문자로 통일, 영문숫자 섞어 써도 됨

확장자는 .html

5. 기본 태그

태그 = element 요소

속성=값 / attribe=”value”  ->  예: <html lang=”ko”> 한글로 표시

<!doctype html> = html5 버전으로 작성되었다는 것을 알리는 것

<html> = 웹 문서 시작을 알리는 태그, lang 속성을 사용해 문서에 사용할 언어 지정

<head> = 문서 정보 지정하는 태그이자 기본적인 문서의 제목. 그 안에 <title> 로 문서 제목과 <meta> 로 문자 세트 지정.

<mata charset="utf-8"> 이걸 해줘야 한글이 표시됨. charset = 글자, utf-8 = 다국어가 지원

<meta> 로 키워드, 설명, 소유자 또는 제작자 정보 지정 가능.

<body> = 문서의 내용, 본문.

*teb 쳐서 꼭 들여쓸 것.

예:

<!doctype html>

<html>

    <head>

        <title>문서의 제목</title>

    </head>

    <body>

    </body>

</html>

*브라우저에 반영된 것을 바로 확인하려면 비주얼 스튜디오 코드 프로그램 하단의 go live 버튼

※가장 기본적인 문서구조:

<!doctype html>

<html lang="ko">

    <head>

        <title>문서의 제목</title>

        <mata charset="utf-8">

    </head>

    <body>

    </body>

</html>

*비주얼 스튜디오 코드에서는 웹 문서의 태그를 자동으로 입력해주는 Emmet 기능이 있음

html:5 + 엔터 키 or ! + tab or enter 키 누르면 아래의 기본 태그 자동 작성

Emmet 이란! HTML 소스 코드를 빠르게 입력할 수 있도록 해주는 플러그인 기능, 예전에는 젠코딩이라고 함.

*<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

</body>

</html>

*여기서 view port는 시작 화면을 말함, device-width는 기본형, 1.0는 기본형

6. 텍스트 관련 태그

<h1>~<h6> = 제목 태그, 숫자가 높을수록 글씨 작아짐, 제목 안에 단락을 만들 수는 없음

예: <h1><p>제목</p></h1>

<p> = 단락 만들기

<br> = 줄 바꾸기, 단독 태그

<hr> = 수평 줄 넣기, 거의 안 씀

<blockquote> = 인용문 넣기

<pre> = 입력하는 그대로 화면에 표시함 따라서 안에 있는 본문 공백도 모두 표시. 거의 안 쓰지만 어쩔 수 없을 땐 사용. 음성 파일에서는 건너뛰기 해버려 시각장애인의 경우 <pre> 안에 중요 내용 넣는다면 확인 어려움. 웹표준에는 맞지만 접근성(누구나 똑같이 이용했을 때 똑 같은 내용을 확인할 수 있어야 함)에 맞지 않음

<strong>, <b> = 텍스트 굵게 표시. strong 은 시멘틱, b 는 디자인적(물리적)으로 굵게. 중요 내용이라 강조할 때는 strong 쓸 것, 화면 낭독기가 알려줌.

<em>, <i> = 이탤릭체(기울게). 중요 내용은 em, 단순 표시는 i

<q> = 인용 내용 표시(quote). blockquote 는 블록 레벨 태그로 줄 바뀌고 들여 써지지만, q 는 인라인 레벨 태그로 줄바꿈 없고 내용 구별할 수 있도록 “따옴표” 붙여 표시

<mark> = 형광펜

<spen> = 구분. 의미는 없지만 단락이나 영역 안에서 일부 텍스트만 묶어줄 때. 가장 많이 씀

*그 외 <abbr> = 약자표시, <cite> = 참고 내용 표시, <code> = 컴퓨터 인식을 위한 소스코드, <kbd> = 키보드 입력이나 음성 명령 같은 사용자 입력 내용, <small> = 부가 정보처럼 작은 텍스트, <sub> = 물의 화학식은 h20 같은 아래 첨자, <sup> = 5의 2승 같은 위첨자, <s> = 취소선, <u> = 밑줄

7. 목록 태그

■ <ul> = 순서가 필요하지 않은 목록, <ol> = 순서가 필요한 목록

-문서의 7-80% 목록 태그 씀

-그 안의 자식태그는 li 밖에 못 씀

-<li> 안에는 <p> 등 다른 태그 가능

-중첩 리스트: 원뎁스, 투뎁스 등으로 부름

(예: <ul>1일차<ol><li>해녀박물관</li><li>낚시체험</li></ol></ul>

-type 속성은 목록 앞의 숫자나 기호를 바꿔주는 것, css로 하기 때문에 거의 쓰지 않음

■ <dl>, <dt>, <dd> = 설명 목록 만들기

-<dl> = 주제, <dt> = 제목, <dd> = 설명

-순서대로 해야함 주제, 제목, 설명 순으로 꼭! dt 안에 여러 dd가 있을 수 있음

-목록 태그는 기본으로 들여쓰기가 됨

8. 링크 만들기

<a> = anchor 앵커 -> 예: https://www.naver.com/”>네이버</a>

-주소창을 local, 그 안의 속성을 href 라고 함

-속성과 속성 사이는 한칸 띄워주기 안 띄워주면 유효성 검사에 걸림

-target 속성: 새 탭에서 링크 열기. _blank(새탭, 새창), _self(현재탭) 등

■ 링크를 거는 경로로 절대 경로, 상대 경로가 있는데

-절대 경로: 인터넷 상 주소, 웹서버의 주소로 연결 (http~)

-상대 경로: 현재 만들고 있는 문서를 기준으로 연결할 문서나 이미지의 위치 지정

■ 상대 경로를 표시하는 방법

-같은 폴더 위치: 같은 디렉토리 상에 위치 (같은 폴더에 위치) (예: 파일명.확장자, 앞에 ./ 쓰기도 하지만 안 써도 됨)

-상위에 위치: 상위 디렉토리에 위치 (예: ../파일.확장자)

-하위에 위치: 하위 디렉토리에 위치 (예: 폴더명/파일명.확장자)

한 페이지 안에서 이동하기

-이동하고 싶은 위치마다 id 속성 이용해 앵커 만들고 각각 다른 이름 지정, 링크 만들 때처럼, <a> 태그의 href 속성을 사용해 링크. 다만 앵커 이름 앞에 #붙여야 함

예: 해당 글 앞쪽에 <p id=”a1”> 이런 식으로 적고, <a href="#a1">본문1</a> 하면 이동

9. 이미지 넣기

-예: <img src=”경로” [속성=”값”]>’

-alt 속성: 이미지를 설명해 주는 대체 텍스트. 컨텐츠에 대해 정확히 설명하기. 빈칸을 해도 표준은 통과하지만 내용을 넣어야 접근성 좋음

-width, height 속성은 css로 대체하기 때문에 잘 안 씀. px 안 넣어도 픽셀 값으로 함

*lorem 숫자 = 숫자만큼의 자동으로 글이 생성

CSS

1. style

style 이란 html 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들을 가리킴.

html은 웹 사이트의 내용을, css는 웹 문서의 디자인을 구성. 따라서 사이트의 내용을 수정하더라도 디자인에 영향을 미치지 않고 내용만 수정 가능.

■ 스타일 형식 = 선택자{속성:값;속성:값}  -> 예: p{text-align:center;}

■ 스타일 시트

- 인라인(inline) : 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 것. 한 줄 안에 집어넣음. (예: <p style=””>)

그 사이에 다시 다르게 하고 싶으면 spen으로 분리, 인라인으로 들어가는 경우는 많지 않음

- 내부 스타일 시트 :  <head> </head> 태그 사이에 <style> </style> 태그 넣고 작성. 셀렉트 표기법(태그 선택자, 클래스 선택자, 아이디 선택자) 여기서 클래스랑 아이디는 이름을 만들어주는 것 / 선택자{속성:값;속성:값} -> 예: <style> p{font-size:20px;color:blue} </style>

- 외부 스타일 시트: 외부에 파일을 만들어 스타일을 작성. <link> 로 불러오면 됨. 파일명은 파일이름.css

2. 주요 선택자 종류 및 표기법

위에서 스타일 속성을 적용하는 요소를 선택자(selector) 라고 했음.

 - 태그 선택자 : 특정 태그가 쓰인 모든 요소에 스타일 적용. (예: 태그{스타일} / p{font-size:20px;color:blue} )

 - 클래스 선택자 : 특정 부분에 스타일 적용. 숫자 시작 안됨, 한글 안됨, 영문소문자, 특수문자 안됨, _- 가능, 영문숫자 조합 가능. 예를 들면 .text1 = text1이라는 class를 말함 (예: .클래스명{스타일} / .text1{letter-spacing:5px;} )

           *텍스트 일부에만 스타일 적용: <spen class=””> 사용.

 - 아이디 선택자 : 특정 부분에 스타일 적용. 중복적으로 줄 수 없음 (중복 가능하지만 문법적으로 맞지 않음) (예: #아이디명{스타일} / #point{font-style:italic;color:rgba(166,200,0,0.5)} )

           * 단어와 단어 붙을 때 구분하기 위해서 대문자 표시 = 카멜표기법 (예: txtLine) 문제없지만 보통 이렇게 함

3. 텍스트 관련 스타일 (속성)

■ font-family : 글꼴 지정하기. (예: font-family:<글꼴 이름>[,<글꼴 이름>, <글꼴 이름>] ) 컴퓨터에 있는 서체로 하기 때문에 맨 앞의 글꼴 즉 기본형의 글꼴이 없으면 [ ] 안의 글꼴로 대체한다는 뜻(기본형의 옵션)

* 보통 웹 폰트 많이 사용, 서버에 연결에서 가져다가 화면에 랜더링 할 수 있음

다시! 216p

■ @font-face : 웹 폰트 사용하기. 구글 웹 폰트 이용 (예: @font-face{font-family:글꼴 이름;src:url(글꼴 파일 경로) format(파일 유형);}

■ font-size: px, em, rem, %, vh, vw

■ font-weight: 폰트마다 굵기 정해져 있음 그러나 보통 400~700이지만 다 다름

■ color: 예를 들면 rgb(256,0,0) / 실제로는 색명 보다는 rgb 값, 16진수 표현한 값으로 많이 함, 투명도 알파값은 0~1 rgb 뒤에 a / 색상환은 hsl(0,100%,80%) / 16진수는 #ff3929 이런 식으로 쓰고 rgb 괄호 안에 숫자를 16으로 나누고 나온 값, 나머지 값 순으로 정렬. 256p 16진수 표 안의 표기법으로 계산함 예를 들어 rgb(12, 119, 164) = #0c77a4 이것을 헥사코드라고 함 f~0 까지 높을수록 농도가 높다는 것

■ line-height : 행간 즉, 한 줄의 높이

■ letter-spacing : 글자 사이의 간격

■ text-decoration : 텍스트에 선으로 꾸며줌 밑줄, 취소선 같은 것

■ font-style : 글자의 모양을 정해주는 것 기울림 같은 것

■ text-transform : 대문자 또는 소문자로 바꿔주는 것 uppercase 는 대문자

■ word-break : 컨텐츠 밖으로 텍스트가 빠져나갔을 때 줄바꿈, 철자별로 또는 단어별로 나누는 옵션 있음

■ text-align : 글자 정렬, 왼쪽 오른쪽 가운데

■ text-indent : 들여쓰기

4. 주석

- html 주석은 <!-- 주석내용 -->

- css 주석은 /* 주석내용 */ 단축키는 alt+shift+a

- 주석은 요구사항, 서명, 수정사항 등 에 사용

5. 우선순위

- 위에서부터 아래로, 아래에 있는 것에 우선순위 적용

- 경로가 있는 것이 경로가 없는 것보다 우선순위가 높다.

- 스타일시트 : 인라인 > 내부스타일 > 외부스타일 순으로 우선순위 높음

- 선택자 : 아이디 > 클래스 > 태그 순으로 우선순위 높음

 * 위에서부터 아래로 적용이더라도 위에 아이디가 있으면 아이디가 먼저 적용하기 때문에 위에 있는 아이디로 적용함

 * h1#title → h1 태그의 title 아이디를 불러온 것, 붙여야 종속

!정리!

h, p, br, q, a 등 태그, 이미지, 속성 지정, 컬러 지정,

css 폰트, 컬러, 지정하는 방법, 기본 문법, 속성 표기법, border 적용법

w3schools 레퍼런스 확인할 것!

3주 차 교육

5/16 margin-collapsing, flex box, 카카오톡 화면 구현 1

5/17 카카오톡 화면 구현 2, animation, JS 시작

5/18 CSS : filter, white-space / JS : 변수, 데이터 타입, 템플릿 리터럴, 객체

5/19 JS 원시타입 참조타입, 연산자, 제어문 

5/20 JS 제어문, SCSS 활용

3주차 교육 후 느낀점

이번 주에는 CSS 반응형 페이지 위주로 실습하고 JS 기초 문법을 배웠다.

HTML 끝나고 CSS 시작할 때 CSS 가 어려워서 HTML 이 너무 수월하고 재밌었는데

이제 JS 를 배우기 시작하니 CSS 가 재밌고 JS 는 죽도록 어렵다.

그래도 원래는 강사님이랑 페이지를 만들어보거나 강사님이 직접 만들어보라고 하면

다 만들지도 못하고 허덕대다가 강사님이 설명하는 걸 듣고 이해하기 바빴는데

이제는 시간 안에 끝낼 수 있다는 것에 너무 뿌듯하다.

나도 성장이라는 걸 하긴 하는구나 라는 생각이 든다.

매번 벼락치기만 했지 공부를 열심히 해보는 건 처음이라서 요령없이 무작정 달려들기만 하고 있는데

주위에서 격려도 많이 해주고 포기하지 않도록 도움도 많이 줘서 그나마 포기하지 않고 다닐 수 있는 것 같다.

솔직히 처음에는 내가 잘할 수 있을까 정녕 내가 이걸 좋아해서 하는 게 맞나 고민도 많고 두려웠는데

물론 아직 겨우 3주뿐이지만 지금은 페이지 만드는 게 재밌고

다른 사이트를 들어가 볼때마다 어떻게 구현할까 고민하고 있는 내가 신기하다.

앞으로 배울 것들이 아무리 어렵더라도 포기하지 않고 싶다. 버텨보고 싶다. 

배우는 게 느리고 한계에 부딪혀서 주저 앉더라도 이대로 포기하기는 싫다. 

이제 CSS 는 깔끔하진 않지만 어느정도 내가 원하는대로 구현할 수 있게 되었는데 JS 가 문제다.

아직 기초 문법밖에 배우지 않았는데 머리가 포화상태다.

원시 타입과 참조 타입은 왜 설명하는 거고

연산자들은 다 비슷한 것 같은데 왜 이렇게 종류가 많은지 

구문 하나만 작성해도 머리가 아픈데 여러 개를 중첩해서 어떻게 써야 하는지 머리가 아프다.

일단 나중에 활용하기 용이하도록 외우고 있다.

3주차 기반 실습 진행

저번 실습 마무리 때 상단의 나머지를 만들어본다고 했었는데 결국 못했다...

그래도 이번에 강사님이 내준 과제 예제를 활용해서 목록은 없지만 유명한 SNS 페이지 하나를 구현해봤다.

HTML

<header> <!-- 상단 -->
    <div class="inner">
        <h1><a href="#">HI's tagram</a></h1>
        <div class="head-icon">
            <i class="fa-regular fa-newspaper"></i>
            <i class="fa-regular fa-user"></i>
        </div>
    </div>
</header> 
<main>
    <div class="wrap">  <!-- 메인을 감싸는 wrap -->
        <section class="main-left">  <!-- 메인 왼쪽 -->
            <div class="main1">  <!-- 메인 1단 -->
                <div class="main1-inner">
                    <div class="me"></div>
                    <input type="text" placeholder="오늘 무슨 일이 있었나요?">
                </div>
                <a href="#"><i class="fa-regular fa-image"></i></a>
            </div>
            <div class="main2">  <!-- 메인 2단 -->
                <div class="user">
                    <div class="me"></div>
                    <div class="user-main">
                        <p>HI</p>
                        <span>11:27pm, yesterday</span>
                    </div>
                </div>
                <p class="main2-txt">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quod, doloremque tempora cum iusto error sed aliquam. Ab vitae possimus iste pariatur earum impedit odio ut, non, assumenda eos minus.
                </p>
                <div class="icons">
                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
                    <span>25k</span>
                    <a href="#"><i class="fa-regular fa-message"></i></a>
                    <span>10k</span>
                </div>
            </div>
            <div class="main3">  <!-- 메인 3단 -->
                <div class="user">
                    <div class="me"></div>
                    <div class="user-main">
                        <p>HI</p>
                        <span>11:27pm, yesterday</span>
                    </div>
                </div>
                <p class="main3-txt">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium non odio vitae, reiciendis alias corrupti sunt, vel ducimus neque quia voluptatem earum unde quis quaerat. Excepturi repellat eaque accusamus recusandae.
                </p>
                <img src="images/maldives.jpg" alt="">
                <div class="icons">
                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
                    <span>25k</span>
                    <a href="#"><i class="fa-regular fa-message"></i></a>
                    <span>10k</span>
                </div>
            </div>
            <div class="main3">  <!-- (사진만 다른) 메인 3단 복사붙여넣기 -->
                <div class="user">
                    <div class="me"></div>
                    <div class="user-main">
                        <p>HI</p>
                        <span>11:27pm, yesterday</span>
                    </div>
                </div>
                <p class="main3-txt">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium non odio vitae, reiciendis alias corrupti sunt, vel ducimus neque quia voluptatem earum unde quis quaerat. Excepturi repellat eaque accusamus xrecusandae.
                </p>
                <img src="images/beach.jpg" alt="">
                <div class="icons">
                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
                    <span>25k</span>
                    <a href="#"><i class="fa-regular fa-message"></i></a>
                    <span>10k</span>
                </div>
            </div>
        </section>
        <section class="main-right"> <!-- 메인 오른쪽 -->
            <a href="#">
                <div class="profile">
                    <div class="me"></div>
                    <p>HI</p>
                </div>
            </a>
            <p>나의 친구</p>
            <a href="#">
                <div class="profile">
                    <div class="cate"></div>
                    <p>Cate Blanchett</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="hem"></div>
                    <p>Hemtube</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="hea"></div>
                    <p>HeaJooo</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="kristen"></div>
                    <p>Kristen Stewart</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="eva"></div>
                    <p>Eva Green</p>
                </div>
            </a>
            <a href="#">
                <div class="profile">
                    <div class="dia"></div>
                    <p>Diamonds</p>
                </div>
            </a>
        </section>
    </div>
</main> <!-- 메인 끝 -->
<footer>
    <address><i>&copy; HI's tagram co.</i></address>
</footer>  <!-- 하단 끝 -->

CSS

body{height: 100%; background-color: #f4f3f383;}

/* 상단 */
header{
    width: 100%;
    background-color: #fff;
}
header .inner{
    width: 800px;
    margin: auto;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
}
.inner>h1{
    font-size: 15px;
    font-weight: bold;
}
.inner .head-icon>i{
    margin-left: 10px;
    color: gray;
}

/* main, 중복 적용(me, user)*/
.wrap{
    display: flex;
    width: 800px;
    margin: auto;
}
.me{
    width: 40px; height: 40px;
    background: url(../images/tomato.png) no-repeat center / cover;
    border-radius: 100%;
}
.user{display: flex; align-items: center; margin-bottom: 30px;}
.user .user-main{margin-left: 10px;}
.user .user-main>p{font-size: 14px; font-weight: bold;}
.user .user-main>span{font-size: 10px; color: #bbb;}

/* 메인 왼쪽 1단 */
.main-left{
    width: 70%;
}
.main-left .main1{
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.main-left .main1-inner{
    display: flex;
}
.main-left .main1-inner>input{
    outline: none;
    border: none;
    margin-left: 10px;
}
.main-left .main1-inner>input::placeholder{
    color: #aaaa;
    font-size: 11px;
}
.main1>a{
    margin-top: 10px;
    font-size: 18px;
    color: #dddd;
}

/* 메인 왼쪽 2단 */
.main-left .main2{
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}
.main2 .main2-txt{
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 20px;
}
.main2 .icons{
    color: #bbb;
    width: 23%;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
}

/* 메인 왼쪽 3단, 중복 */
.main-left .main3{
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
}
.main3 .main3-txt{
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 20px;
}
.main3>img{
    width: 100%;
    margin-bottom: 20px;
}
.main3 .icons{
    color: #bbb;
    width: 23%;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
}

/* 메인 오른쪽 */
.main-right{
    width: 30%;
    height: 360px;
    margin-left: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 20px;
}
.main-right .profile{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.main-right .profile>p{
    margin-left: 10px;
    font-size: 13px;
}
.main-right>p{
    font-size: 11px;
    margin-bottom: 10px;
}
.profile .cate{
    width: 40px; height: 40px;
    background: url(../images/cate.png) no-repeat center / cover;
    border-radius: 100%;
}
.profile .hem{
    width: 40px; height: 40px;
    background: url(../images/hem.png) no-repeat center / cover;
    border-radius: 100%;
}
.profile .hea{
    width: 40px; height: 40px;
    background: url(../images/hea.jpg) no-repeat center / cover;
    border-radius: 100%;
}
.profile .kristen{
    width: 40px; height: 40px;
    background: url(../images/kri.jpg) no-repeat center / cover;
    border-radius: 100%;
}
.profile .eva{
    width: 40px; height: 40px;
    background: url(../images/eva.jpg) no-repeat center / cover;
    border-radius: 100%;
}
.profile .dia{
    width: 40px; height: 40px;
    background: url(../images/dia.jpg) no-repeat center / cover;
    border-radius: 100%;
}

/* 하단 */
footer{
    text-align: center;
    background-color: #fff;
    padding: 10px 0;
    font-size: 12px;
}

실습에 대한 해설 

1. HTML

먼저 <header> , <main> , <footer> 를 만들어 줬다. 

상단

- <header> 상단의 위치를 중간으로 잡아주기 위해 <div> 로 inner 를 만들어주고 로고를 <h1> 안의 <a> 로 홈페이지로 이동하도록 만들어줬다.

- 로고와 함께 flex 를 쓰기 편하도록 <div> 로 아이콘들을 묶어주었다.

 메인

- <main> 의 위치를 잡기 위해 <div> 로 wrap 감싸줬고

- <section> 으로 글들이 있는 메인 왼쪽, 친구 프로필이 있는 메인 오른쪽으로 나눠 줬다.

- 메인 왼쪽은 <div> 로 'main1, main2, main3, main3 중복' 4단으로 나눠줬고 

- main1 은 오른쪽 끝 아이콘과 함께 flex를 쓰기 편하도록 main1-inner 를 프로필 사진과 <input>을 묶어줬다.

- main2 는 <div> 로 상단의 user, <p> 로 중간의 텍스트, <div> 로 하단의 아이콘 총 3단으로 나눠줬다.

- main3 은 main2 와 동일하게 만들고 텍스트와 아이콘 사이에 사진만 추가해줬다.

- 메인 오른쪽은 각 프로필로 이동하도록 <a> 로 먼저 감싸고 <div> 로 profile 부분은 감싸주어 flex 하기 편하도록 만들어줬다.

- <p> 로 중간에 나의 친구 부분을 만들어줬다.

 하단

<address> 로 저작권 표시를 해줬다.

2. CSS

먼저 <body> 에 브라우저에 맞게 넓이가 변하도록 넓이를 100% 로 설정하고 배경색을 살짝 회색으로 잡아줬다.

상단

- <header> 에 브라우저에 맞게 넓이가 변하도록 넓이를 100% 로 설정하고 배경과 구분되도록 흰색으로 잡아줬다.

- 상단이 중앙으로 오도록 inner 에 넓이값을 800px 정도로 잡아주고 중앙으로 오도록 바깥 여백은 auto 로 설정했다. 메인과의 여백을 위해 바깥 아래쪽에 여백을 주고 flex 처리한 후 자식 요소들을 양쪽 끝으로 보내줬다. 중앙으로 오도록 line-height 를 부여해줬다.

- <h1> 로고에는 글씨 크기와 굵게 설정해줬다.

- 아이콘들 사이에 공간을 주기 위해 바깥 왼쪽에 여백을 주고 색깔을 줬다.

메인, 중복 컨텐츠 설정

- <section> 을 감싸는 wrap 에 flex 를 적용해 수평 정렬을 해주고 중앙에 오도록 넓이값을 주고 바깥 여백은 auto 로 설정했다.

- 메인의 중복되는 프로필 사진은 동일한 클래스를 주어 미리 설정해줬다. 높이와 넓이를 부여하고 background 에 프로필 사진을 넣고 반복없이, 중앙으로, 꽉 차도록 설정하고 테두리를 둥글게 해줬다.

- 메인 왼쪽의 중복되는 user 부분도 동일한 클래스를 주어 미리 설정해줬다. 프로필사진과 글씨 부분을 수평 정렬 해주고 교차축 기준으로 중앙으로 처리해주고 바깥 여백을 부여해줬다. 그 사이 공간을 위해 바깥 여백을 넣어줬고 글씨들의 스타일도 설정해줬다.

메인 왼쪽

- 메인 왼쪽의 넓이값을 부모인 .wrap 의 70% 정도로 부여해줬다.

메인 왼쪽 1단

- 전체 테두리를 잡아주고 <body> 와 확실한 구분을 위해 흰색으로 부여했다. 안쪽 여백으로 컨텐츠와의 여백을 잡아주고 자식 요소들을 수평 정렬 해준 뒤 양쪽 끝으로 보냈다. 2단과의 공간을 위해 바깥 아래쪽에 여백을 줬다.

- 프로필 사진과 <input> 을 수평 정렬해줬다.

- <input> 테두리들을 없애주고 프로필과의 공간을 위해 바깥 왼쪽에 여백을 줬다. 문구에도 스타일을 지정해줬다.

- 아이콘이 중앙으로 오도록 바깥 위쪽 여백을 주고 스타일을 지정해줬다.

메인 왼쪽 2단

- 1단과 동일하게 테두리, 안쪽 여백, 3단 과의 공간을 위한 바깥 아래쪽 여백을 부여해줬다.

-  txt 는 글자 크기, 줄 간격, 아이콘들과의 공간을 위해 바깥 아래쪽 여백을 줬다.

- 하단의 아이콘들에는 색깔과 글자 사이즈를 설정해주고 아이콘들 사이 넓이의 조절을 위해 값을 퍼센트로 지정해줬다. flex 처리로 수평정렬, 주축 정렬로 자식 요소들 간의 공간을 줬다.

메인 왼쪽 3단, 사진만 다른 3단 중복 단

- 1단과 동일하게 테두리, 안쪽 여백, 아래 3단 중복 단과의 공간을 위한 바깥 아래쪽 여백을 부여해줬다.

- <img> 에는 부모 요소의 넓이에 맞게 100% 로 지정해주고 아이콘과의 공간을 위해 바깥 아래쪽 여백을 줬다.

- 이하 2단과 동일

메인 오른쪽 

- 메인 오른쪽의 넓이값을 부모인 .wrap 의 30%로 잡아주고 높이값도 잡아줬다. 메인 왼쪽과의 공간을 위해 바깥 왼쪽 여백을 주고 테두리, 배경색, 안쪽 여백도 줬다.

- .profile 에 모두 동일하게 flex 처리로 수평 정렬해주고 중앙으로 맞춰주기 위해 교차축을 중앙으로 정렬해줬다. 각 프로필과의 거리를 위해 바깥 아래쪽 여백을 줬다.

- .profile 에 <p> 에는 프로필 사진과의 거리를 위해 바깥 왼쪽 여백을 주고 글씨 크기를 설정했다.

- '나의 친구' 부분에는 글씨 크기와 .profile 과의 공간 주기 위해 바깥 아래쪽 여백을 줬다.

- '나의 친구' 하단의 프로필 사진에는 모두 동일하게 넓이, 높이 값을 주고 배경 이미지를 반복없이, 중앙으로 꽉차게, 테두리는 원형으로 되도록 줬다.

하단

- <address> 를 중앙으로 오도록 중앙 정렬해주고 배경, 폰트 지정해주고 안쪽 상하 여백을 줬다.

실습 후 느낀점 및 고칠점

페이지를 만드는 건 얼마 안 걸렸는데 이것저것 다 설명하려다 보니 글을 하루 온종일 쓴 것 같다. 

아무래도 글 쓰는 데에 시간이 뺏기니 막상 다른 공부를 못하고 있다.

다음 주차 실습 때는 글자 스타일이나 배경색 같은 기본적인 건 빼고 설명해야 겠다.

글 쓰는 게 좀 오래 걸리더라도 해설을 쓰고 있으면 고칠 점이나 부족한 점이 확연히 보여서 좋다.

메인 오른쪽의 경우 <ul> <li> 를 썼으면 좀 더 편하고 적합했을텐데 그 점이 아쉽고 높이값을 주지 않고 안의 컨텐츠 크기만큼 높이를 잡고 싶었는데 display : inline 이나 inline-block 을 줘도 잘 작동이 되지 않고 box-sizing : border-box 로 해도 잘 작동이 되지 않아서 답답했다.

하단의 저작권 부분에 원래 자동으로 이탤릭체가 나오는데 나오지 않아서 따로 html 에 <i> 태그를 줬다.

아마 reset.css 에서 font-style : nomal 로 되어 있어서 그런 것 같다.

그리고 3주차 마지막날 scss 를 배울 때 중복되는 스타일에 @extend 나 @mixin 을 사용했다면 더 편리했을 것 같다는 생각을 했는데 안 그래도 강사님이 이 sns 페이지 과제를 나중에 scss 로 같이 적용해보자는 말씀을 하셨다. 

나중에 강사님과 함께 풀어볼 때 확실히 배워서 더 편리하게 css 를 작업할 수 있었으면 좋겠다.

2주차 교육

5/9 탭 만들어보기, transform, transition, box-shadow

5/10 그라데이션, vender prefix, 웹 폰트, 이미지 맵, form, 시멘틱 태그

5/11 재플린을 활용한 페이지 제작 1

5/12 재플린을 활용한 페이지 제작 2

5/13 재플린을 활용한 모바일 페이지 제작

2주차 교육 후 느낀점

2주차부터 본격적으로 웹페이지 제작에 들어갔다.

지마켓 페이지를 이용해 상단과 하단을 만들어보고 재플린을 이용해 웹페이지를 구현해봤다.

본문은 1주차부터 계속 반복해서 오래걸리고 지저분하지만 구현은 할 수 있었다.

하지만 상단이 문제였다.

<transform> 을 이용하여 위치를 잡거나 <a>, <img> 등이 추가되어 복잡해진 레이아웃에 정신이 없었다.

강사님이랑 같이 만들 때는 이해가 갔는데 로고와 목록, 회원가입 위치를 잡기가 어려워서 계속 헤맸다. 

지마켓, 이솝, 모바일까지 했는데도 이해가 충분히 되지 않았는지 계속 강사님의 코드를 보면서 복습을 했다.

기초를 잘 다지지 않고 넘어간 것 같아서 내가 원하는 것을 만들어보며 연습을 해보기로 했다.

우선 상단을 자주 만들어 보는 것이 좋을 것 같아 일단 목록부터 실습하기로 했다.

2주차 기반 실습 진행

5/13 까지 배운 것을 바탕으로 대학교 페이지 목록을 만들어 봤고 이게 그 결과물이다.

HTML

<body>
    <ul class="gnb">
        <li class="depth1">
            <a href="#">학교소개</a> <!--큰 목록-->
            <ul class="depth2">
                <li><a href="#">대학기구</a></li>
                <li><a href="#">대학현황</a></li>
                <li><a href="#">캠퍼스 안내</a></li>
                <li><a href="#">홍보갤러리</a></li> <!--작은 목록-->
            </ul>
        </li>
        <li class="depth1">
             <a href="#">입시안내</a> <!--큰 목록-->
             <ul class="depth2">
                <li><a href="#">수시 모집요강</a></li>
                <li><a href="#">정시 모집요강</a></li>
                <li><a href="#">편입학 모집요강</a></li>
                <li><a href="#">입시관련 묻고 답하기</a></li>
                <li><a href="#">대학원 입학</a></li> <!--작은 목록-->
             </ul>
        </li>
        <li class="depth1">
            <a href="#">대학/대학원</a> <!--큰 목록-->
            <ul class="depth2">
                <li><a href="#">대학 안내</a></li>
                <li><a href="#">대학원 안내</a></li>
                <li><a href="#">평생교육원</a></li> <!--작은 목록-->
             </ul>
        </li>
        <li class="depth1">
            <a href="#">학사종합안내</a> <!--큰 목록-->
            <ul class="depth2">
                <li><a href="#">학사정보</a></li>
                <li><a href="#">교수전용</a></li>
                <li><a href="#">장학정보</a></li>
                <li><a href="#">학자금대출</a></li>
                <li><a href="#">등록</a></li> <!--작은 목록-->
            </ul>
        </li>
        <li class="depth1">
            <a href="#">취업정보</a> <!--큰 목록-->
            <ul class="depth2">
                <li><a href="#">공지사항</a></li>
                <li><a href="#">취업진로지원처</a></li>
                <li><a href="#">구인·구직정보</a></li>
                <li><a href="#">채용 정보 사이트</a></li> <!--작은 목록-->
            </ul>
        </li>
    </ul>
</body>

CSS

/*큰 목록 설정*/
.gnb{
	width: 1000px; margin: 50px auto;
    }
.gnb .depth1{
	float: left; 
    width: 200px; 
    text-align: center;
    }
.gnb .depth1>a{
	display: block; 
    font-size: 20px; 
    font-weight: bold; 
    line-height: 50px; 
    background-color: #fff;
    color: #000;
    }
.gnb .depth1:hover>a{color: #4c4cc3;}

/*작은 목록 설정*/
.gnb .depth2{
    padding: 30px 0; 
    background-color: #4c4cc3;
    border: 1px solid #4c4cc3;
    border-radius: 10%;
    color: #ebebeb; font-size: 14px;
	display: none;
    }
.gnb .depth2>li{padding-bottom: 15px;}
.gnb .depth2>li:last-child{padding-bottom: 0;}
.gnb .depth2>li:hover{color: black;}

.gnb .depth1:hover>.depth2{display: block;}

실습에 대한 해설 

1. HTML

 - <ul> 안에 5개의 <li> 를 만들어 줬다.

 - <a> 로 큰 목록을 만들어 주고 하단의 작은 목록은  그 아래에 <ul>, <li> 로 만들어 줬다.

 - 불러오기 편하도록 <ul>, <li> 에 각 class 를 부여해줬다.

2. CSS

 - reset.css 파일을 따로 만들어 초기화를 먼저 했다.

 - .gnb 에 넓이와 상하좌우 바깥 여백을 잡아줬다.

 - .depth1 안에 수직으로 되어있는 큰 목록과 작은 목록을 수평 처리해줬다. 목록 사이 여백을 위해 넓이값을 주고 중앙으로 정렬해줬다.

 - 큰 목록은 인라인 태그라 블록 처리를 해줬고 폰트는 20px, 굵게해주고 줄 간격 50px 로 여백을 만들어줬다. 배경은 흰색, 글자색은 검정으로 잡아줬다.

 - .depth1 에 갖다대면 큰 목록의 글자색을 파란색으로 되도록 만들어줬다.

 - .depth2 은 안쪽 여백 상하단을 잡아주고 배경색과 테두리색을 동일하게 잡은 다음 둥글게 모양을 만들어 줬다. 글자색과 글자 크기를 지정해주고 보이지 않게 처리 해줬다.

 - .depth2 의 각 <li> 에 안쪽 아래 여백을 잡아줬다.

 - .depth2 의 마지막 <li> 에 안쪽 아래 여백은 잡히지 않도록 처리해줬다.

 - .depth2 <li> 에 갖다대면 글자색은 검정색으로 잡아줬다.

 - .depth1 에 갖다대면 .depth2 가 나타나도록 처리해줬다.

실습 후 느낀점 및 고칠점

실습하기 전에는 내가 뭘 모르는지 어느 곳을 잘 이해 못하는지 잘 몰랐는데 실습을 하니 그런 부분들이 보였다.

사실 평일에는 그날 하루 배운 것도 이해하고 복기해보기 바빠서 따로 실습할 여력이 없었는데

주말에 실습을 진행해보면서 알게 되어 다행이라는 생각이 든다.

만약 실습을 하며 공부해보지 않았다면 나중에 프로젝트를 진행할 때 많은 어려움을 겪었을 것 같다.

시간상 여력이 되지 않을 것 같아 상단의 목록만 만들어봤는데

만들면서 로고나 회원가입 아이콘 부분 같은 걸 넣어보고 싶은 욕심이 들었다. 

3주차 중간에 상단의 나머지를 채워볼 예정이다. (아마 못할 것 같다.)

html 은 괜찮은데 css 는 아직도 순서가 뒤죽박죽 정신 없이 코딩이 되는 것 같다.

언제쯤 강사님처럼 깔끔한 코드를 작성할 수 있을까?

css 를 작성할 때 한 클래스 완성하고 확인하고 싶은데 계속 한 속성 작성하고 확인하는 작업을 반복한다.

충분한 연습이 필요할 것 같다.

그래도 처음엔 html 마크업하는 것도 헤맸는데 이렇게 할 수 있는 건 그래도 발전이 있다는 뜻이겠지.