웹 기록용
웹 1 수업 페이지 (~ 9일차까지 정리) 본문
⭐ 수업 시작할 때 세팅해야 할 주요 페이지 ⭐
✅티스토리 : 사이트 이동하기
✅ 코드팬 : 코드팬 이동하기
✅ 깃허브 : 깃허브 이동하기
🍊숙제 제출 시트 🍊
👍과제 놓치지 않고 잊기 전에 꼭 메모 보면서 연습하기(중요❣️)
🍋 2일차 주요 내용 🍋
[HTML, CSS , JS 용어 알아보기]
| HTML | html은 문서 뼈대를 담당한다 (공간만 제공함) |
이미지, 글자 | |
| CSS | html에서 생성된 공간, 이미지, 글자 등을 꾸며주는 역할을 한다 | 글자 크기, 글자 색상, 박스 크기 등 | 컬러 속성값 종류 및 설정방법 ✅알아보기 |
| JS | 동적인 부분을 담당한다 | 특정 레이아웃을 클릭했을 때 페이지가 넘어감, X버튼을 클릭하면 팝업 닫힘 | |
| 주석 | 주석안에 있는 코드는 실행되지 않는다. 용도는 여러가지이다 | 메모(협업), 코드 실행 x, 잠시 감춰놓을 때 사용함 | ctrl + / |
| 태그 | 브라우저가 html문서를 읽어들일 때 인식할 수 있도록 도와주는 용도정도로 이해하면 좋음 태그가 우리 눈에 보이려면 갖춰야 할 3가지 조건 1.너비 2.높이 3.배경색 |
여는태그 : <div> 닫는태크 : </div> 엘리먼트 div + tap : <div></div> |
✅더 자세하게 알아보고 싶을 때 -> 페이지 이동하기
👍태그와 컬러 속성값 설정 및 여러가지가 풀이되어 있는 페이지
복습하다가 필요할 때 다시 확인할 것
특히 html head, body 설명 부분은 이해될 때까지 들여다 봐야 함
🍋 3일차 주요 내용 🍋
[block, lnline, block-inline 알아보기]
| block | 상위엘리멘트 크기만큼 너비를 상속받는다 크기가 아무리 작아도 한줄에 하나씩 배치된다. 레이아웃을 구분할 때 사용되는 요소이다 |
레이아웃을 구분할 때 사용되는 큰 박스이다 ex) 네이버의 서치박스,배너박스 ✅예시 보기 width(너비)가 auto(기본값)일 때 100% 작동한다 주요태그 ex ) div.. |
| inline | 한 줄안에서의 일부분의 영역만 상속받는다 상위엘리멘트 공간이 부족하지 않는 한 한줄에 같이 나온다 하단과 양 옆에 알 수 없는 여백이 생긴다 |
다른 엘리먼트와 같이 사용할 수 있음 ex) 네이버 로그인창 ✅ 예시 보기 주요태그 ex ) span(텍스트), a(링크), img(이미지), ::before, ::after(가상요소-html태그 추가없이 사용가능) |
| block-inline | 한줄에 같이 배치된다 너비,높이 속성을 사용할 수 있다 하단과 양 옆에 알 수 없는 여백이 생긴다. |
원할 때마다 display 속성값을 바꿔서 사용할 수 있다 주요태그 ex) button |
[추가 개념 plus]
| 픽셀(px) | 웹에서는 기본적으로 비트맵 이미지를 기반으로 쓴다 |
| 비트맵 | 각각의 색상 정보를 가진 px들이 모여서 한장의 이미지를 구성하는 이미지를 뜻한다 비트맨이미지는 해상도 저하가 일어날 수 있다. |
| ⭐높이-auto ⭐ | auto : 태그가 기본적으로 가지고 있는 성격대로 적용 높이는 모든 태그가 auto일 때 0으로 작동한다 height: auto; = 0이랑 height: 0;인 상태랑 다르다 height: auto; = 0(하위요소크기만큼 크기를 가지겠다. 물풍선에 물을 300L 넣으면 물풍선이 300L만큼의 크기를 갖는 것과 같다) ->height: 0; 은 px이 0개이다. 즉 없다는 의미를 가진다 |
✅더 자세하게 알아보고 싶을 때 -> 페이지 이동하기
👍각각의 주요 특징과 태그를 복습할 것
특히 주요개념들이 무엇인지 이해될 때까지 살펴볼 것
🍋 4일차 주요 내용 🍋
[상위엘리먼트와 하위엘리먼트를 부르는 명칭]
| body-section | body를 기준으로 section은 자식엘리먼트 section을 기준으로 body는 부모엘리먼트 |
| body-div | div를 기준으로 body를 조상엘리먼트 body를 기준으로 div를 후손엘리먼트 |
[상속되는 텍스트의 속성]
- 적용된 태그에 적용되기 보다는 아래로 한 칸 내려가서 적용된다
- 적용된 태그를 기준으로 하위요소 태그에 전부 적용된다
- 텍스트 속성은 상속되기 때문에 텍스트를 감싸고 있는 태그에 직접 적용하는 것이 좋다(특정한 경우는 제외)
✅더 자세하게 알아보고 싶을 때 ->페이지 이동하기
[젠코딩 주요 등호]
| {} | 텍스트 |
| $ | 1번부터 n번까지 |
| > | 자식엘리먼트 |
| + | 인접동생엘리먼트 |
| () | 그룹 |
| [] | 속성 |
| . | 클래스 선택 |
| * | 여러 개(복수) |
[추가 개념 plus]
css에서 클래스 선택자 적용시킬 때에는 이름앞에 . <- 꼭 붙여야 함
🍋 5일차 주요 내용 🍋
| 브라우저에서 텍스트 취급 받는 요소 | |
| 텍스트 | 텍스트의 특징 행간과 자간이 있다 *행간 : 줄과 줄 사이의 여백 *자간 : 글자와 글자 사이의 여백 |
| inline | |
| inline-block | |
✅기본적으로 폰트는 가독성 때문에 자간과 행간이 존재한다
inline과 inline-block도 브라우저에서 텍스트 취급을 받기 때문에
텍스트의 특징(행간,자간)을 갖고 있다고 보면 이해하기 좋다
텍스트의 속성을 없애기 위해서는???
Tip.텍스트의 속성은 한단계씩 떨어져 적용된다는 점을 생각해야 함
[a태그의 특징]
- 특정한 사이트나 위치로 이동할 수 있는 태그
- 기본값은 내가 보고 있는 페이지가 바뀌면서 페이지 이동
- display: inline;이다
- href="" 안에 적혀있는 링크를 하이퍼링크라고 부른다
- 클릭했을 때 이동할 수 있는 형태가 있어야 한다
- a태그는 target이라는 속성이 기본적으로 들어있고 기본값은 self이다
- self는 내가 보고 있는 페이지가 바뀌면서 페이지 이동이고 blank라는 값은 새 페이지가
열리면서 페이지 이동을 할 수 있게 해주는 속성값이다
[css힘 순위]
| 1순위 | 선택자로 선택된 클래스 선택자 |
| 2순위 | 클래스 선택자 |
| 3순위 | 선택자로 태그된 태그 선택자 |
| 4순위 | 태그 선택자 |
| 5순위 | 태그 선택자 |
-같은 순위끼리는 가장 아래쪽에 있는 코드가 실행된다
-같은 순위끼리는 개발자 모드에 있는 코드가 실행된다(이미 업로드 된 파일)
-라이브러리를 활용할 때에는 개발자모드에 있는 선택자보다 더 강하게 선택해야 커스텀 할 수 있다
✅코드팬 참고하기
🍋 6일차 주요 내용 🍋
[padding과 margin]
| padding | 너비 , 높이에 포함되는 여백 오브젝트와 오브젝트 분리 역할과 버튼에 주로 사용됨 |
| margin | 너비, 높이에 포함되지 않는 여백 오브젝트와 오브젝트 분리 역할 |
[텍스트 정렬하는 방법]
| 정렬 방법 ( 텍스트 정렬 / 도형 정렬) | ||
| 텍스트 요소 (텍스트, inline, inline-block) |
텍스트 정렬 | 좌측정렬 : text-align: lett; 우측정렬 : text-align: right; 중앙정렬 : text-align: center; ❗정렬하고 싶은 오브젝트의 상위엘리먼트에 적용된다 |
| 도형요소 (block, flex) |
도형 정렬 | 좌측정렬 : margin-right: auto; (우측을 auto값만큼 차지하기때문에 좌측으로 밀림) 우측정렬 : margin-left: auto; (좌측을 auto값만큼 차지하기때문에 우측으로 밀림) 중앙정렬 : margin-left: auto; margin-right: auto; (tip : 이해가 안된다면 고무줄의 원리를 생각하여 이해해보기) ❗정렬하고 싶은 오브젝트에 직접 적용된다 |
-> 더 자세히 알아보기
🍋 7 & 8일차 주요 내용 🍋
[피그마 예제 - 마켓컬리 구현]
/구현해야 할 예제
html에 폰트링크, 심볼링크를 입력할 때에는 1.폰트 2.심볼 순으로 배열 되어야 함
body - font-family 링크
항상 예제를 보고 구현할 때에는 큰 틀을 우선 만들고
차차 하위틀을 만들어 작성하기 / 그리드를 만들고 오브젝트를 나열.
처음에는 크기나 진행상황을 보기 위하여 border를 지정함 ->추후에는 없어도 코드로 진행가능
상위틀을 잡았으면 하위틀에 wtdth,display,color등등 코드 작성 (천천히 진행연습하기)
✅개념 plus
box-sizing: border-box -> 너비높이에 padding값이랑 border값을 포함 시키겠다는 의미
나중에 틀 여백없이 가득차게 진행할 수 있는 코드값.
->코드팬 이동하기
🍋 7 & 8일차 주요 내용 🍋
[flex의 개념]
✅높이
모든 태그는 높이가 auto(기본값)일 때 0으로 작동한다
flex-item이 되면 높이가 auto(기본값)일 때 상위 엘리먼트의 100%으로 작동한다
- 예제로 확인하기
1번부터 5번 네모박스 중 하나만 값이 설정되어 있어도
다른 네모박스도 동일한 값을 상속받게 됨 (flex의 상속을 하고, 상속을 받는 특성)
[flex-container / flex-item]
| flex- container | item을 정렬하는 코드는 전부 flex-container에 작성된다 dispaly - flex가 적용된 엘리먼트를 flex- container라고 부른다 width: auto일때 100%으로 작동한다 *브라우저에서 도형취급을 받는다 *margin-left:auto;와 margin-right:auto;로 정렬한다 |
justify-content : 가로정렬 align-items : 세로정렬 flex-direction : 방향정렬 flex-wrap : 줄바꿈 정렬(반응형) align-cotent : 줄바꿈이 되었을 때 정렬(반응형) |
| flex- item | display-flex가 적용된 엘리먼트의 [자식만] flex-item이라고 부른다. width가 auto일때 0으로 작동한다 height가 auto일때 100%으로 작동한다 text-align을 사용해서 정렬할 수 없다 flex-item의 크기를 직접적으로 커스텀하는 속성은 flex-item에 직접 적용한다 align-items가 적용된 align-item 은 height가 auto일 때 0으로 작동한다 |
✅plus 개념
| flex-item이 auto일 때 | align-items 적용 ⭕ | height: auto=0 |
| align-items 적용 ❌ | height: auto=100 |
❓ flex-container 높이 = flex-item 높이가 같을 때
[문제점]
높이가 같아서 정렬할 수 없다
[해결 방안]
flex-container가 강제로 flex-item높이를 작게 만들어서 원하는 위치로 정렬시킨다
*flex-grow : 비율
*flex-basis : 비율 설정
*flex-shirnk : 고정 설정
✅flex-direction 방향
| flex-direction | row | justify-content : 가로정렬 align-items : 세로정렬 flex-grow : 가로에서 작동 |
| column | justify-content : 세로정렬 align-items : 가로정렬 flex-grow : 세로에서 작동 |
😊웹 1 간단한 수업 일지
🔆1일차 - 간단한 중요 단축키와 세팅해야 할 주요 페이지를 배웠다 / 수업이 끝난 후 따로 단축키로 새탭을 열고
링크를 거는 연습을 하였다
🔆2일차 - html,css,js,주석,태그 등등 들여다 보는 시간이었다. 특히 div와 상위엘리멘트 block관계 등등 이해가 많이 필요한 수업이었고, 보다 보니 처음보다는 이해가 되었지만, 자주 복습이 필요한 부분임( 중요❣️)
🔆3일차 - 이해가 되면서도 안되는 3일차였다..주요 개념들을 구분할 줄 알아야 할 듯
🔆4일차 - 클래스선택자 부분이 약간 어려웠음.<- 반복해서 설정해보기 / 그래도 흥미로운 내용이었다
🔆5일차 - 텍스트의 속성에 대하여 이해가 필요함
🔆6일차 - 과연...잘 할 수 있을까?에 대한 의문이 많이 남던....ㅎㅎ
🔆7일차 - 전체적인 복습 필요..
🔆8일차 - 사이즈 계산하는 게 좀 어려움...🥲 감이..잡히질 않는다
🔆9일차 - 웹1 종강...ㅎㅎ...웹 2 ..가능할까 나...?