$$config title: 수업끄적_웹1 keywords: - 수정모드로 보자 $$ # 1일차 저장 : ctrl + S 수정 : ctrl + E 글씨크기 조정 : 크게(#갯수로 정해짐) tab : 띄어쓰기 4칸 섹션 나누기 : - 이거 쓰기 단락나누기 : --- 이거 쓰고 담줄부터 쓰기 이미지 링크 연결 방법 ![]() 이런식으로 쓰기 [수업 내용]: (https://slog.gg/p/10817) 여기 들어가서 보기 [디스코드]:(https://discord.gg/fX9ssAQ2uW) 박스 쓰기 : '''(그레이브 악센트)를 쓰고 담줄부터 줄 맞춰줌 끝나고 '''쓰기 맨앞 그레이브 악센트 뒤에 css를 넣으면 색도 들어감 껍데기< > : div 쓰고 tab 누르기 --- #코드펜 사용법 정리 사이트 주소 : https://codepen.io/ Github : 협업할 때 좋음, 공동작업이 가능, 이미지나 파일 등을 웹사이트에 올려서 쓰는 거 soen120@naver.com dkdth172255 fork : 기존 작업물을 보존하고 싶을 때 누름 그러면 보존용 하나 생기고 스페어로 작업하면 됨 shift + 대괄호: { } 소괄호 생성 폰트사이즈 : 기본 사이즈가 16px / rem은 기본의 배수 ex) 0.8rem = 0.8배 weight 기본은 400, bolder는 700 폰트 너비 조절 : width:500px; 폰트 높이 조절 : height:100px; 폰트 배경색 조절 : background-color:색코드 또는 이름; 폰트 크기 조절 : font-size:75px; 폰트 두께 조절 : font-weight:bolder; --> 한단계 두껍게 font-weight:bold; font-weight:lighter; --> 한단계 얇게 폰트 색 조절 : color:색코드 또는 이름; ex) color:#66a6c0; color:yellow; ctrl + /: 주석생성 or 해제 css의 경우 /* */ JS는 // * { } : 전체 태그 적용, 최상위에 올림 ex) 전체에서 rem 주고 body에서 rem 주면 같이 적용됨 한가지만 적용X body{ } : * 대신 body도 적용 가능 body의 경우 하위테그들 다 속성이 상속됨(body윗 테그는 적용X) 전체 중에 선택한 테그만 변경하고 싶은 경우 각 테그에 따로 입력하면 상속 적용 안됨 높이/너비/폰트사이즈/폰트높이가 적용됨 폰트 행간 조절 : line-height: px; + 정가운데에 두고 싶은 경우, width와 같은 값을 주면 정 가운데에 위치함 text-align:end; start F12: HTML 확인 shift + tab : 테그 간단 정리 폰트 자간 조절 : 우선순위 정하기 : html > body { } --> 바디만 적용 단, !important를 입력하면 적용됨 -> 남발하지 말기 나중엔 뭐가 중요한지 모름 최대한 쓰지 않는게 좋음 letter -spacing : - div - section - 하위태그 --- # 2일차 lorem *숫자 tab 텍스트 단위로 줄넘김이 되지 않고 스펠링 단위로 넘어감 : word-break:break-all; + 상속도 가능 텍스트 관련은 다 상속됨 한글의 경우 영어와 달리 한글자씩 넘어감 영문만 예외가 있기 때문에 이런 태그가 존재함 - 줄바꿈 고정 : white-space:nowrap x축으로 계속 문장 늘어남, border로 박스 생성해도 텍스트가 뚫고 나감 윗첨자 : !^글자글자 아래 첨자 : !_한글 글자 두께 및 폰트 사이즈 강조 : !

안녕하세요

숫자 커질수록 얇아지고 작아짐 너비 고정 : width:100%; 기준값은 html의 값임 단, 높이는 안됨 display:block; 기본값 글씨 및 이미지, 텍스트 : display:inline; display:block; 글자 크기만큼 block생성 : display:inline; 너비, 높이 설정해도 안먹힘 무조건 텍스트 사이즈만큼만 생성 inline이지만 block처럼 속성값을 주고 싶을 때 : display:inline-block; ★한줄에 여러개 생성 가능 display:none; 링크 : 여기에 지정이름 ""이거 사이에 링크 넣어주기 ex)네이버처럼 대형사이트 아니면 거의 연결됨 긴 문장을 묶어주기 : ex)안녕 ctrl + D : 한줄 다 지우기 !!!!!!디스플레이 block은 한줄에 하나밖에 안됨!!!!!!! 너비를 줄여서 해도 의미 X 무조건 다음줄로 넘어감 이들의 차이를 잘 이해하고 있어야함 디스플레이 특징 : 기본 너비 100% 한줄에 하나 텍스트 특징 : inline으로써 한줄에 여러개 생성 가능 href 속성값 새탭에서 열기 네이버 ☆ 텍스트 속성 띄어쓰기는 꼭 한칸만 보임. 텍스트 전에도 안먹힘 엔터를 눌러도 다음 줄로 안넘어감 엔터 = 띄어쓰기 엔터 :
줄 만들어서 단락 나누기 :

링크를 써야하는데 모르는 경우, 네이버입니다. 사이트 주소 자리란에 #을 넣어 사용하기 없애주는 작업 : 텍스트 링크가 안보이게 해주기 노말라이즈, NOM으로 주석을 달아주기 color:inherit; 색깔을 고유 속성값으로 쓰겠다는 태그 링크태그 밑줄 없애기 : text-decoration:none; 링크 색 넣기 : div로 감싼 뒤, 색 넣어주면 됨 단, a에서 색이 color:inherit로 되어 있지 않고 따로 입력한 경우 div에서 색을 넣어도 a에서 설정한 색으로 나옴 태그 = 엘리먼트 엘리먼트엔 순서가 있음 div{ div(자식1) nav(손자1) } ☆★테이블 구성 해보기★☆ 첫째줄 첫째줄을 한번 더 묶기

↓

교시/요일	: 폰트 진하게 강조, 텍스트 가운데정렬	월	화	수

↓ : 첫째줄 : 둘째줄

교시/요일	월	화	수
1교시	국어	: 기본 폰트	수학	일본어
2교시	영어	국사	음악

--- # 3 일차 div>section>a[href="#"] 여기에+를 하면 동생이 생김 = div>section>a[href="#"]+ div>section>a[href="#"]+nav^div a와 nav를 품은 section div>section*3>a[href="#"]+nav^div section이 3개됨 div>section*3>a[href="#"]{아이템1}+nav^div 중괄호에 넣으면 숫자증가하면서3개 들어감 ☆작동이 안되면 안되는 부분부터 복사 잘라 넣기한 뒤 tab누르기 젠코딩으로 테이블 만들기 div>a[table=border"1"] table>thed>tr>th*4^^tbody table>(thed>tr>th*4)+tbody table>(thed>tr>th*4)+tbody>tr*3>th+td*3 a[href="https://www.naver.com/"][target="blank"]{네이버바로가기}+br+a[href="https://www.google.co.kr/"][target="brank"]{구글바로가기}+br+a[href="https://www.daum.net/"][target="blank"]{다음바로가기} CSS에서 후손 선택자 >>>>이거도 쓰긴하지만 띄어쓰기도 ㄱㅊ음 ex) div a { } & div>a{ } ex) div section a div { width:100%; text-align:start; } div span a { color:red; font-size:90px; } nav { width:100%; text-align:end; } nav span a { color:blue; font-size:140px; } section { width:100%; text-align:center; } section span a { color:yellow; font-size:120px } → 폰트행간조절은 큰 단락에서 width와 함께 줘야함 색조절, 사이즈조절은 세부에서 해도 ㄱㅊ음 display:block하고 세부에넣어도가능 근데 굳이... div:hover{ background-color:green; width:200px; height:200px; transition:1s; } hover : 마우스를 가져다놓으면 변경됨 transsition : hover에서 설정한 값으로 변경됨 돌아올때도 같은 효과를 주려면 기존에서 넣어야함ex) div{ }여기와 div:hover:{ }여기 돌아오는 거도 같은 조건 말고 다양하게 변경 가능 width, height, color 등 ☆ transition - delay / dulation / property(한계값설정에서 사용) / timing function 이게 다 그냥 transition에 들어있음 ☆ 우선순위는 있음 무조건 dulation이 1등 timing 경우 ease이 기본 값(linear도 있음 순서는 상관X 띄어쓰기만 잘 챙기기 작동 안함) ease도 4가지 나뉨 박스도 inline이기 때문에 text align 가능 ctrl + shift +end 2칸 이상 띄어쓰기 하고 싶을 때 : 글자사이에 을 넣기 ex) 안 녕 = 안□녕 안 녕 = 안□□녕 ㅣ : shift enter 링크에 display :block 을 주면 영역이 넓어지기 때문에 그냥 div에만 넣어도 ㄱㅊ음 ctrl+ shift+ F : 쓰고 싶은거 단어 전체 선택 후 변경 ctrl+F: 찾기만 가능 ctrl+ G : 다음 찾기 nav로 다 감싸기 --- # 4일차 id를 넣어 사용할 때 형태 :

id는 문서상 딱 한개만 나오게 하기 두번이상 쓰는거 ㄴㄴㄴ

이런식으로 두번쓰기도 안됨 A 띄어쓰고 B쓰기 class 넣어 사용할 때 형태:

class는 여러개 중복 사용 가능! id 지칭 : # ex)

여기에서 CSS -> #a{ } class 지칭 : . ex)

CSS-> .a,b{ } & .a{ } & .a b{ }(이거는 a따로 b따로 띄어쓰면 후손선택됨) 우선순위 : id > class > 태그 div에도 있고 section에도 있으면 CSS에서 section.a.b{ } 이런식으로 사용하기 div속성 : block 그래서 높이만 줘도 나옴 border:10px solid currentcolor; currentcolor부모색 따라가기 그냥 색 넣어도 됨 세가지는 순서 상관없음 solid 말고 다른거도있음 deshed(점선) 근데 사용빈도 적음 html{ color:red; } div{ height:100px; width:300px; background-color:darkcyan; color:black; border:10px solid currentcolor; } 테두리 각짐 조절 : border-radius:10px; 숫자커질수록 둥글둥글해지고 어느각도이상으로는 안나옴 px말고 %으로도 쓸 수 있음 % = 원 border-radius:50% (높이 너비를 같은 값주는 상태) border-radius:10px 20px 30px; 왼쪽 상단부터 시계방향으로 돌아가면서 꼭지점 각도 조절 가능 2개를 주면 1,3 / 2,4끼리 각 같아짐 ◎ 이미지(inline속성)

https://picsum.photos/id/237/200/300 : 번호 /너비 /높이 id와 바로 뒤에 오는 숫자를 지우면 랜덤으로이미지 나옴 새로고침 : ctrl shift 7 inline은 너비 높이를 못주지만 이미지는 예외 너비/높이 중 아무거나 줘도 기존사진비율만큼 같이 커짐 이미지 개발자모드 바로 가기 : ctrl + shift + C 이미지를 드래그하면 밑에 빈공간이 약간 보임 빈공간을 없애고 싶을 때 display:block을 주면 사라짐 width:100%주고 라이브러리 : 여러 페이지에 쓰는 것! = 내가 자주 쓰고 또 쓸만한 걸 만들어두고 필요할 때 복사해서 꺼내 쓰는거임 노멀라이징보단..라이브러리 max-width:100%; = 100%이하 라는 뜻 즉, 원본값을 유지할 때 쓰고 border를 줬을 때 꽉채우고 싶으면 width :100%를 주면 됨 이미지를 링크넣는 경우가 많은데, 이미지에block을 넣고 링크(= 감싸고 있는애)에 border를 주면 상자가 안생김 링크에 display:block을 줘야 생김 box-sizing:border-box; 박스 사이즈 내부의 보더값이나 패딩들이 박스 사이즈를 넘지 못하게한다. object-fit:cover; object-fit:contain; object-fit:none; object-fit:fill;: 기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다. object-fit:cover; : 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다. object-fit:contain; : 요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다. object-fit:none; : 원본이 가운데에 나온다. object-position : 오브젝트 위치 조정 object-position: 가로위치 세로위치; ex) 0px 4px → 오른쪽에만 4px만큼 이동 기준은 좌측상단정렬 기준으로 -px값을 넣으면 올라가거나 왼쪽으로 더 가고 그냥 px값을 넣으면 내려가거나 오른쪽으로 이동 속성값 : px, %, left/right/center/top/bottom → 공간에 이동할 자리가 있으면 이동 가능 border값을 외각으로 주게되면 실제 넣은 너비 높이보다 큼 ex)border:5px solid red; 너비 높이 200300 줘도 실제로는 210310임 box-shadow:border-box; ## 주석정리 노말라이즈 : 쓸데없는 거 즉, 태그를 넣었을 때 태그에 딸려오지만 내가 쓰지 않을 효과를 제거 또는 지울때 때 이 주석에 분류시킴 라이브러리 : 어디에 또 쓸일이 있을 것같으면 이 주석으로 분류 커스텀 : 딱 필요한 곳에 쓸려고 정한 태그만 이 주석으로 분류 무료이미지 가져오는 사이트 모음 픽사베이 https://pixabay.com Pexels https://www.pexels.com 이미지 주소 복사로꼭 해야함 이미지 복수업로드 없애기 : background-repeat:no-repeat; background-image:url( ), ( ) 이런식으로 여러 이미지를 넣을 수 있고 순서가 뒤로 갈수록 사진도 제일 밑에 깔림 꼭 높이를 줘야함!! height값 장점 : 텍스트를 입력할 수 있음 background-position:50%; 이미지 위치를 선정할 수 있음 !!!!부족하다고 느끼면 책 꼭 보기!!! section > div:last-child{ background-color:blue;} section > div:nth-last-child(2){ background-color:blue; } ( ) 안엔 2n 등 이런 숫자도 가능임. 짝수 전부 또는 2n+1 이런것도 가능 section > div:nth-child section > div:nth-child(7n + 7):hover padding : 똑같은 너비 높이 가져도 padding넣으면 넣은 수치만큼 ##안쪽 여백이 작아짐 음수 불가능 전체크기 변화있음 넓어진것처럼 보여질 뿐... 근데 display:inline넣으면 안됨 10px 20px 30px 40px 으로 주면 위 쪽부터 시계방향으로 값 줌 또는 padding-bottom, - top, -left, -right로 줄 수도 있음 (margin은 inline상태에서 가능) margin : ##바깥쪽 여백을 입력한 픽셀값만큼 넣어줌 전체크기 변화 없음 짜피 밖이니까 기본으로 body에 8px가 있음 그래서 작업한거 보면 약간 위아래로 너비가 있음 음수 가능 margin-left : 30px 이라고 하면 전체 화면에서부터 왼쪽 30픽셀 값만큼 이동인거임 근데 auto라고 입력하면 오른쪽으로 가버림 오른쪽에서 잡고 있는 margin이 있으니까 근데 오른쪽도 auto를 주면 완전 center로 감 left, right 둘다 같이 100 px등으로 auto가 아닌 값을 주면 원래는 마지막에 쓴거가 우선순위인데 왼쪽이 우선순위여서 왼쪽 정렬이 됨 top/bottom에서도 top이 우선순위임 그래서 그냥 왼쪽, 위만 사용함 width을 안주면 각 좌우에서 준 값을 제외한 만큼의 영역을 나타냄 = margin값으로 상자 크기 설정 가능 패딩 + 박스사이즈 = 이미지가 작고 박스사이즈가 지정값만큼 설정됨 마진 = 이미지가 딱 지정한 값만해짐 테두리공백 없음 --- # 11월 1일 화요일 수업 cursor : pointer 엘리먼트 사용갯수 제한 없음 section > div(1) div(2) >img 총 7개로 구성 child 사용하기!! 이미지를 두줄로 나타내고 큰 덩어리 2개로 나눔 last-child{ } 는 바디에ㄴ느 안됨 ex) div > img로 되어 있는 상태에서 img에 넣어주려고 하면 안먹힘 걍 규칙임 section > div > img는 되어 있는 상태여야 가능한 기능임 그래서 그냥 div:nth-child(2)로 사용해야함 구글링으로 새로운것을 배워야함 익숙해지는 것이 제일 중요하다.....ㅇㅅㅇ display:inline-block을 주면 너드값이 들어있음 너드 : 폰트값 사이즈에 영향을 받음 그래서 font-size:0을 주면 됨 텍스트 관련된 아이들을 다 속성이 적용되서 텍스트도 같이 없어짐 - >이거는 기본값에 들어가는 것 font-size:1rem; 이걸 줘야 텍스트가 다시 나옴 -> 원하는 공간에서 보이고 싶을 때 쓰는 것! inline인 애들끼리 vertical 값을 줌 위아래줄 너드가 없어짐 vertical-align:top; 기본값으로 많이 씀 잘 안씀 근데 왜냐 -> 다른 방법이 있기 때문! 인라인 속성한테만 먹이는 상대적 정렬인자,top으로 정렬해야지 가장 이상정인 정렬상태가 된다. inline-grid : 정형화된 이미지 정렬 section에 class로 넣어주면 됨 그러고 나서 inline-grid>* 로 넣어주면 됨 그러면 나중에 수정할 때 custom으로 해둔 >* 에서만 수정하면 되는 거임 font-size:0; display:block; font-size:1rem;은 꼭 넣어야하는거임!!!!!! 예제 답안 잘 확인하고 정리해야겠다리~~ calc(100% / 7); : 계산식 쓰는것 절대 붙어서 쓰면안됨 다 띄어쓰기 넣어서 써야함 ul / li li : 항목 ul은 margin값이 있음 그래서 있고 없을 때 점 위치가 다름 이차 항목은 위치가 중요함 목록 -> 항목 노말라이즈에 넣는 기본적인 것들 body{ } margin0; padding:0; list-style:none; a{ } text-decoration:none; color:inherit; 라이브러리 html> body*{ box=sizing . 태그{ } 해두고 필요하다고 느끼면 html에 class로 넣기! ol box-1>img:not(:nth-child(5n)) 소괄호안에들어 있는 애는 뺀다는 뜻 -- : 변수를 사용한다는 뜻 변수 이름을 설정하고 :을 씌움 그리고 var( ) 쓰고 괄호 안에 변수 이름을 넣으면 됨 float: /* 텍스트가 인라인이면 어울림, 블락이면 뒤로 깔림 = float*/ /* 에프트는 자식임 clear는 float의 줄바꿈임 엔터와 같다고 보면 됨*/ /* 에프터에 디스플레이 블락을 줘서 감싸주게함 즉, 부모를 에프터에 만들어서 쓰는거라고 보면 됨 */ /* 크게 감싸는게 div이고 거기에 에프터를 줘서 감싸는 형태를 이룬다!! */ /* /* 위와 아래에 높이를 주고 나머지는 빼기로 함 */ /* .menu{ width:1000px; border:3px solid green; height:100px; text-align:center; background-color: lightgreen; } .main{ border:3px solid red; width:200px; height:800px; text-align:center; background-color:lightsalmon; float:left; } .article{ border:3px solid blue; width:; height:800px; text-align:center; background-color:skyblue; float:right; } .content:nth-child(1){ border:3px solid blue; width:; height:800px; text-align:center; background-color:skyblue; float:right; } .content:nth-child(2){ border:3px solid blue; width:; height:800px; text-align:center; background-color:skyblue; float:right; } */ 11월29일 만들기 실습 다시 함 근데 사실 잘 모름껄껄 플랙스 css배우기 호완성 검사 사이트에서 float를 치면 다 호환 근데 인터넷 익스플로는.. grid는 사각배치 오늘 만든 예체같은거 이런거를 그리드라고 부름 플랙스는 좀더 범용적임 부모를 컨테이너 자식을 아이템이라 부름 컨테이너의 속성에 따라 아이템의 배치가 달라짐 display속성을 flex으로 설정 가로배치가 되면서 너드 값이 없어짐 높이 지정이 매우 중요함 너비는 내용물만큼 생기기때문 row가 기본값 가로 column은 세로 wrap을 걸면 줄바꿈이 된다 가로축 정렬:justify align-items는 그냥 가로축이 되어 있을 때 세로축으로 정렬하는 게 아니라 메인축의 반대되는 교차축으로 정렬하는거임