$$config title: 송지섭 1일차, 웹 1 노트 keywords: - 태그 - 배경색,너비,높이 - display $$ # 1일차 ## 단축키 - ctrl + alt +shift + p ---> 미리보기 켜기/끄기 - 링크거는 법 : (내가 적고 싶은 이름)[`주소링크`] ## 도움이 되는 사이트 - [색상조합](https://colorhunt.co/) ## 수업페이지 - [수업페이지](https://codepen.io/vexxxx/full/vYezWpL) ### 2022-01-15 문제 - [1번 문제](https://codepen.io/jangka44/pen/GRrxONw) - 배경색, 높이, 너비 - [2번 문제](https://codepen.io/jangka44/pen/KBdaGd) - 문제 - div, section, article 태그를 사용해서 3가지 색의 막대를 만들어주세요. - [2번 문제 정답](https://cdpn.io/jangka44/debug/VBvPeM) - 문제 정답 - 구글에 colorpicker ----> rgb코드 보여줌! ## 코드펜사용법 - ctrl + shift +7 - 태그명 + tab ---> 자동 완성 ## css 문법 - CSS선택자{ 속성: 속성값; } - 여기서 선택자는 대부분 html에 있음 ex) div { color:red; } - 세미클론을 빼먹지 않도록 주의해야 한다. ## css 속성 (색깔,배경색,너비,높이) - `color` : 색깔 - `사용예시` ---- > `color`: + 하고싶은 색상; ex) color:red; 색 지정 - tip : 내가 다양한 색깔을 넣고싶다. ex) color:#000000; 여기서 0에 f든 색상에 따른 코드를 저장 -> 16진수 r(red)g(green)b(blue) - colorhunt에서 복사해서 이용도 가능 - `back-ground-color` : 배경색 - `사용예시` ---- >`back-ground-color`: + 하고싶은 색상; ex) back-ground-color:red; 배경색 지정 - `height` : 높이 - `사용예시` ---- > `height`: + 넣고싶은 px; ex) height:100px 높이 지정 - `height`는 값을 주지않으면 0이 된다. - `width` : 너비 - `사용예시` ---- > `width`: + 넣고싶은 px; ex) width:100px 너비 지정 - `div`,`section`,`nav`,`article`은 `width`를 주지 않으면 최대한 유연하게 늘어난다. ## 태그(tag) - html(Hyper Text Markup Language)은 웹의 내용, css(Cascading Style Sheets)웹의 꾸밈, js(Java Script)는 웹의 인터렉션을 맡는다 - html은 여러 태그들로 이뤄져있다. - tag는 이름표이다. - 태그에는 크게 시작을 여는 시작 태그와 끝을 닫는 종료 태그가 있다. - 종료 태그에는 /(슬래쉬)가 붙는다. - 태그의 문법: <시작태그>내용 - ex) <시작 태그> 내용 -----> element(엘리먼트) - 내용을 포함한 시작태그부터 종료태그까지를 하나의 엘리먼트라고 부른다. ## display - [display 속성 정리](https://codepen.io/jangka44/live/ZjbpPR) - 폰트의 사이즈가 픽셀의 크기를 벗어나면 폰트가 background를 벗어난다. - 만약 폰트가 없다면, 최소한의 값은 0이 된다. ---> 최소한의 조건도 없기때문에 - `block`(욕심이 많은 편) - 너비 : 너비가 지정되어 있지 않으면,최대한이지만 유연하게 늘어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어된다. - 배열방향 : 한줄에 무조건 1개 ---> 나 혼자 한 줄 먹을꺼야 - `inline-block`(욕심이 적은편) - 너비 : 너비가 지정되어 있지 않으면, 최소한으로 유연하게 줄어된다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어된다. - 배열방향 : 한줄에 최대한 여러개 ---> 나 혼자 먹지 않고 나눠 먹을꺼야 ---> 만약에 자리가 부족하다면 맨 마지막 순서대로 아랫줄로 내려간다. - `none`(아무도 필요없다) - 화면에서 없어진다. # 2일차 ## display - `block` - 너비 : 너비가 지정되어 있지 않으면, 최대한으로 유연하게 늘어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. - 배열 방향 : 한줄에 무조건 1개 - `inline-block` - 너비 : 너비가 지정되어 있지 않으면, 최대한으로 유연하게 줄어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. - 배열 방향 : 한줄에 무조건 여러개 ## css 특징 - css는 같은 길이의 선택자를 사용했을 때, 뒤에 오는게 우선 적용된다. - 주의해야 할 점 : css 속성을 적을 때, 세미클론(;)을 깜빡하지 말아야한다. ## 도움이 되는 사이트 - [css 사이트](https://www.w3schools.com/) -> 속성공부에 유용 ## 엘리먼트의 관계 - 나를 감싸는 엘리먼트: 부모 엘리먼트 - 내가 감싸는 엘리먼트: 자식 엘리먼트 - 같은 부모를 둔 엘리먼트: 형제 엘리먼트 - 내 안에 있는 모든 엘리먼트: 후손 엘리먼트 <-> 조상 엘리먼트 ## css 속성(font weight) - `font weight` ----> 굵기 - `lighter`,`normal`,`bold`,`bolder` - 100 단위로 100에서 900 - 기본값은 `normal` - `font size` ----> 텍스트의 크기를 조절 - 2가지 방법(상대적과 절대적) -- `rem` -> 몇배로 키워라 ex) 3rem : 3배로 키워라 -- `px`; -> 절대적인 키워라 ex) 10px : 그냥 10px이야 -- `%`,`em`도 사용하지만 많이 사용하지 않는다. - `letter spacing` ----> 텍스트 간의 간격 조절 -> 자간 조절 - 음수값이면 좁아지고 정수값이면 넓어진다. - 기본적으로 0 - `color` ----> 텍스트의 색상 - 2가지 방법(색상의 이름과 #rgb 16진수) - `black`,`#000000`,`#000`,`rgba(0,0,0,1)` - hex 코드 축약법 - 예) #000000 = #000,#112233 = #123 - 일반 색상의 이름이나,hex코드를 사용해서는 글자의 투명도를 조절할 수 없다.rgba를 사용해야한다. - `rgba` ----> 내가 해상도마저도 조절하고싶다! - `rgba(red,green,blue,해상도)` `rgb`와 다르게 10진수로 가능하며 0~255까지 숫자를 넣어 조절가능하다 맨 마지막은 해상도로(0~1)까지 조절 가능하며 1로 갈수록 진해진다. - `opacity` ----> 투명도 - 다만, 글자와 백그라운드 모두 투명해진다. - 0~1 사이에 조절 가능 # table - `table` : 테이블(표) 태그 - `tr` : 테이블 열(줄) - `td` : 테이블의 칸 - `th` : 각열의 제목, 자동으로 `font-weight`가 `boid`가 적용이 되어있고, 중앙 정렬이 된다. - 이는, css를 이용해서 자유롭게 수정할 수 있다. # a와 br - `a` - `a` 태그는 링크를 걸어주는 태그이다. - `a` 태그의 `href` 속성은 어디로 이동이 할 지 사이트의 url을 넣어준다. - `a` 태그의 `target`이라는 속성은 연결된 링크를 어디에서 여는지 정해주는 속성이다. - `target`의 기본값은 `_self`이다. 현재 페이지에서 열어준다. - codepe에서는 작동하지 않는다. - `target` 값 중에 `_blank`는 새 창이나 새 탭에서 열어준다. - `br` - `br`은 줄바꿈 태그이다. - `br`은 다른 태그와 다르게 종료 태그가 없다. # 3일차 ## 젠코딩 - `>` : 부모 자식 엘리먼트를 만들 때 사용 - : `div`>`section` - `+` : 형제 엘리먼트를 만들 때 사용 - : `div`+`section` - `*n` : 같은 태그명의 n개의 형제 엘리먼트를 만들 때 사용 - `div*3` - `태그명[속성명="속성값"][속성명="속성값"]{내용}` - 예시 : `a[href = "https://www.naver.com"][target="_blank"]{네이버로 이동}` ```html 네이버로 이동 ``` - [네이버로 이동](https://www.naver.com/) ## 후손.자식 선택자 - ` ` : 후손 선택자(띄어쓰기) - 예) `div a` : `div` 안에 있는 모든 `a` - `>` : 자식 선택자 - 예) `div > a` : `div` 자식인 `a` ## text-align - `text-align:left`는 기본값이기 때문에 주지 않아도 된다. - 속성값 종류 - `left` : 좌측 정렬 - `center` : 중앙 정렬 - `right` : 우측 정렬 - `text-align`은 텍스트를 정렬하는 속성이다. `display:block`은 정렬이 되지 않는다. - `dispaly:block`인 엘리먼트를 정렬시키고 싶을 땐, `display:inline-block`으로 만든다. - `text-align`은 자기 자신을 정렬하는게 아니라 자기 자식인 텍스트를 정렬한다. # 4일차 ## hover와 transition - `hover` - CSS 동적 의사 클래스 - `:hover` : 마우스를 올려두었을 때의 상태를 선택한다. - 띄어쓰기를 하지 않고 선택자 뒤에 딱 붙여 쓴다. ``` css div: { background-clolr : red; } div:hover { background-clolr : blue; } ``` - `transition` : 변경이 되기까지의 시간을 설정한다. - CSS 속성 - `:hover`가 아닌 효과를 받는 태그의 css에 작성을 해야 원래의 상태로 돌아올 떄도 적용이 된다. - 속성명을 적지 않고 시간만 적으면 모든 변경되는 속성에 동일한 시간이 설정된다. - `transition`은 대부분 hover가 아닌 곳에서 사용된다. ```css div{ width : 100px; height : 100px; background-clolr : blue; transition : width 1s, height 2s, background-color 3s; } div:hover{ width : 200px; height : 200px; background-clolr : red; } ``` # 공백문자 ## ` ` - ` ` : 공백문자(한 칸의 공백을 띄운다.) - `

` : 수평선을 그려주는 태그 - hr도 br과 같이 종료 태그가 없다 하지만 찝찝하면 hr 뒤에 /를 붙이면 된다. 이건, 시작 태그와 종료태그 사이에 아무것도 존재하지 않을 때 쓰는 축약문이다. - `

` --------> 시작 태그와 종료 태그사이에 아무것도 없으면 축약할 수 있다. ---------> `

` # 5일차(img, object-fit, object-positon) ## `img` - `img` 태크의 `display` 속성의 기본값은 `inline`이다. - `width`와 `height` 중 하나의 값만 주면 다른 하나의 값이 비율에 맞게 조정된다. - `src`는 이미지의 url을 넣는 주소이다. `url`이란 uniform resource locator 즉, 이미지나 텍스트 같은 것의 주소이다. - `alt`는 이미지의 출력이 안 되었을 때, 대체 문구를 넣어준다. - `img` 태그는 종료 태그가 없다.!!-> (즉,자식을 가질 수 없다.) ## `object-fit` - 이미지의 비율을 맞춰 주는 css 속성 - 속성값 - `fill`,`contain`,`cover`,`none`,`scale-down` - `cover`를 많이 사용한다. `cover`는 비율을 유지하면서 정의된 너비와 높이에 가득 채운다. ## `object-position` - `object-position : x축값 y축값;` - px,%,left/righ/center/top/bottom - `object-fit`과 `object-position`은 인터넷 익스플로러에서는 지원이 되지 않기 때문에, 자격증 시험헤서는 사용하면 안 된다. - `크로스 브라우징`을 요구할 때 사용하면 안 된다. - `크로스 브라우징` : 모든 브라우저에서 동일한 화면이 나오게 하는 작업 # 6일차(img, margin, padding) ## `img` - `img`의 `display` 속성값은 `inline`이지만, 예외적으로 `inline-block`의 역활을 하고있다. - `width`가 먹힌다. ## `margin` - `margin : 상하좌우값` - `margin-top : 위쪽바깥여백값;`,`margin-left : 왼쪽바깥여백값;`, `margin-right : 오른쪽바깥여백값;`, `margin-botton : 아래쪽바깥여백값;` - `margin : 상하여백값 좌우여백값;`(2개씩 사용할 때) - `margin : 위쪽 오른쪽 아래쪽 왼쪽;` (시계방향) - `dispaly:inline`은 `margin`이 먹히지 않는다. ## `padding` - 안쪽여백 - 문법은 `margin`과 같다. - `display:inline`은 `padding`이 먹히지 않는다. # 7일차(가상 클래스 선택자) ## `padding`과 `img` - `img`태그에 바로 `padding`을 주기 보다는 다른 태그로 감싼 후에 그 태그에 `padding`을 주자. ## 가상 클래스 선택자 - 선택자 뒤에 딱 붙여쓴다 - ex) div:hover, div:first-child .... - `:first-child` : ~이면서 누군가의 첫 번째 자식 - `:nth-child(n)` : ~이면서 누군가의 n번째 자식 - ex) ` div:nth-child(3)` : div이면서 누군가의 3번째 자식 - ex) ` div:nth-child(even)` : div이면서 누군가의 짝수번째 자식 - ex) ` div:nth-child(odd)` : div이면서 누군가의 홀수번째 자식 - `:last-child` : ~이면서 누군가의 마지막 자식 - `:nth-last-child(n)`: ~이면서 누군가의 뒤에서 n번째 자식 - `:nth-of-type(n)`: ~중에서 누군가의 n번째 자식 - `:first-of-type()`: ~중에서 누군가의 첫번째 자식 - `:last-of-type()`: ~중에서 누군가의 마지막 자식 ## block 요소 정렬 - block 요소와 inline 요소 정렬 비교 - `inline-block`,`inline` - 수동적으로 정렬이 됨 - 부모의 `text-align` 속성에 의해서 정렬이 됨 - `block` - 능동적으로 정렬이 됨(스스로) - `margin`을 이용해서 정렬 - 우측 정렬 : `margin-left:auto` - 가운데 정렬 : `margin: 0 auto` - `margin-left`는 기본 값은 0이기에 기본적으로 좌측 정렬이 되어있다. ## html 구조 - `html` 엘리먼트는 모든 엘리먼트의 루트 엘리먼트이다.(모든 요소의 유일한 상위 엘리먼트) - `html` 엘리먼트의 자식은 `head`와 `body`뿐이다. - `head` 엘리먼트에는 문서에 대한 meta정보가 들어있다. 화면에는 나타나지 않는다. - `body` 엘리먼트에는 화면에 보여지는 문서의 내용이 들어있다. - 코드펜에서 입력하는 `html` 코드는 `body` 엘리먼트 안에 내용이 입력되는 것이다. 다른 부분은 숨겨져있다. # 8일차(class와 id) ## `class`와 `id` - `id` : 문서 안의 단 하나의 요소에 스타일 정의 - 중복 사용 불가능 - 하나의 id를 가질 수 있다. - 예) `#id{...}` - `class` : 문선 안의 여러 요소에 스타일 정의 - 중복 사용 가능 - 여러 개의 class를 가질 수 있다. - 예) `.class{...}` - 우선순위 : `id`>`class`>태그명 - `id`와 `class` 값은 숫자로 시작하면 안 된다. - 특수문자 `-`(하이픈),`_`(언더바)는 사용 가능하다. ## `border-radius` - 모서리를 둥글게 만들어주는 css 속성 - 값을 50% 주면 무조건 원이 된다.(너비와 높이가 같을 때) - 예)`border-radius:20px;` : 상하좌우 동일한 20px 값 - 예)`border-radius:10px 20px;` : 왼쪽 위,오른쪽 아래값, 오른쪽 위,왼쪽 아래값 - 예)`border-radius:10px 20px 30px 40px` : 왼쪽위부터 시계 방향 # 9일차(inherit, a의 노멀라이즈) ## `inherit` - 부모의 값을 상속 받는 css 속성값 - 속성 기본값이 `inherit`인 속성 : `color`,`font-family`,`text-align`,`font-size`,`letter-spacing` - 속성값을 따로 주지 않았는데 부모의 값을 따라하는 속성은 기본값이 `inherit`이다. - `background-color`는 기본값이 `inherit`이 아니다. `transparent`(투명)이어서 비치는 것이다. ## `a의 노멀라이즈` - 노멀라이즈 할 떄에는 css 위쪽에 써준다. - 평범하게 만들어 주는 과정이다. ```css a{ color : inherit; text-decoration : none; } ``` ## `body의 노멀라이즈` ```css body { margin: 0; } ``` ## `class선택자` - 클래스는 구분하기 쉽도록 엘리먼트의 역활과 관련되게 짓는다. - 클래스를 하나만 남기려면, 최상위 엘리먼트만 남기면 된다. - 어떤 엘리먼트를 사용할지를 모르겠다면 ,`div`를 사용해서 클래스를 만든다. - `bem명명법` : 클래스 이름 짓는 규칙 --,__로 짓는 방법 # 10일차(리스트 태그) ## 리스트 태그 - `ul` : unordered list 의 약자, 순서가 없는 목록 - `ol` : orderded list 의 약자, 순서가 있는 목록 - `li` : list item의 약자, 목록의 항목 - `ul`과 `ol`의 자식은 무조건 `li`의 여야만한다. - 노멀라이즈 ```css ul,li{ margin:0; padding:0; list-style:none; } ``` ## 헤딩 태그 - `h1`부터 `h6`까지 있다. - 숫자가 작을수록 폰트 사이즈가 크고, 숫자가 클수록 폰트 사이즈가 작다. - `h1` : 페이지 대표 제목, 한 페이지에 하나만 사용한다. 보통 로고에 쓰인다. - 순서대로 사용해야한다. 기본적으로 정의되어있는 사이즈가 싫다면 css로 조정한다. ---> normalize .... - `h1`을 제외한 나머지는 계층이 같다면 중복해서 사용해도된다. - 노멀라이즈 ```css h1,h2,h3,h4,h5,h6{ margin:0; font-size:inherit; font-weight:inherit; } ``` # 11일차(display:none,inline-grid 라이브러리,calc) ## display 속성 - 없어지는 계열 - `none` - 나타나는 계열 - 세로 배열 - `block` : `div`의 기본값 - 가로 배열 - `inline` : `a`의 기본값 - `inline-block` ## inline-grid 라이브러리! - `inline-block`을 이용해서 만든 라이브리러 - 무언가를 가로로 배치하기 위해 사용한다. - `inline-grid` 라이브러리 ```css .inline-grid { font-size: 0; } .inline-grid > * { display: inline-block; vertical-align: top; font-size: 1rem; } ``` ## calc - 속성명이 아니라 속성 값에 들어간다. - 수학식을 계산해서 값을 반환한다. - 나눗셈은 `%`가 아니라 `/` 다. `%`는 몫을 나누고 난 나머지이다. ex) 5 % 3 = 2 - `calc(100%/5)`는 100%의 5분의 1이다. - `calc(100%/5*4)`는 100%의 5분의 4이다. ## %와 vh - `%` - `%`를 이용해서 넓이와 높이의 값을 주면, 부모의 사이즈에 대한 백분율이 적용이 된다. - 예) 부모의 너비 500px, 자식의 너비 10% = 50px - 기본적으로 높이는 지정해주지 않으면 최소한으로 줄어들기 때문에, 부모에 높이를 지정해주지 않으면 `%`가 적용이 되지 않는다. - `vh` - `vh`는 화면 사이즈 기준 높이이다. - 예) `50vh`는 화면 사이즈 높이의 50%이다. - (참고) `vw`는 화면 사이즈 기준 너비이다. # 12일차(position) ## position - 위치를 지정하는 방식을 정하는 css 속성 - `absolute` : 절대적인 위치, 유령화,유령의 집화 - `width` : 값을 주지 않으면 최소한으로 줄어든다. - `top`,`right`,`bottom`,`left` 값으로 위치 조절이 가능하다. - 조상 유령의 집 기준으로 이동한다. - 겹치는게 가능 - `relative` : 상대적인 위치, 유렬의 집화 - `top`,`right`,`bottom`,`left` 값으로 위치 조절이 가능하다. - 현재 위치를 기준으로 이동한다. - 겹치는게 불가능 - `static` : `position`의 기본 값 - `fixed`,`sticky`는 비슷하지만, `fixed`는 처음부터 고정이 돼 있고, `sticky`는 현재 위치에서 스크롤을 내리면 달라 붙는다. # top,right,bottom.left - `top`,`right`,`bottom`,`left`의 기본값은 `auto`이다. - 유령화를 시킨 후에, `top`,`right`,`bottom`,`left` 값을 주지 않으면 유령화 시키기 전의 위치 그대로 있다. - 유령화를 시킨 엘리먼트에 `width`와 `height` 값을 주지 않아도 `top`,`right`,`bottom`,`left`를 모두 주면 늘어나 나타난다. - `z-index`라는 css 속성을 이용해서 유령들의 순서를 변경할 수 있다. # 13일차(absolute 중앙정렬) ## absolute 인 엘리먼트를 정확하게 중앙정렬 시키는 방법 ```css div{ position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); } ``` # 14일차(white-space,overflow,text-overflow) ## white-space - `white-space:nowrap;` : 줄바꿈하지 못하게 만든다. ## overflow - 속성명 - `overflow` : 모든 넘친 부분 - `overflow-x` : x축으로 넘친 부분 - `overflow-y` : y축으로 넘친 부분 - 속성값 - `visible` : 기본값, 넘처야 보이게한다. - `hidden` : 넘치면 숨기게 한다. - `scroll` : 넘쳐도,안 넘쳐도 스크롤바가 생긴다. - `auto` : 넘칠 때만 스크롤바가 생긴다. ## text-overflow - `text-overflow:ellipsis` : 넘쳐도 잘린 부분을 ... 나타내 준다. - 전제 조건 : 1. `white-space:nowrap;` 2.`overflow-x:hidden;` 을 같이 써줘야한다. ```css div{ text-overflow:ellipsis; white-space:nowrap; overflow-x:hidden; } ``` # 14일차(폰트어썸) ## 폰트어썸 - 무료 아이콘 라이브러리 - [폰트어썸 무료 아이콘](https://fontawesome.com/search?p=5&m=free) - 폰트 어썸 라이브러리 불러오기 - CDNJS 페이지에서 다양한 라이브러리를 불러 올 수 있다. - [CDNJS](https://cdnjs.com/) - html 상단에 추가해준다. ```html ``` - text를 꾸밀 수 있는 모든 속성을 적용시켜 꾸밀 수 있다. ## box-sizing - 요소의 너비나 높이를 정하는 방법을 설정하는 속성 - 속성값 : `content-box`(기본값), `border-box` - `content-box` - 전체 사이즈 : `width`+`padding` + `border` - 컨텐츠 사이즈 : `width` - `border-box` - 전체 사이즈 : `width` - 컨텐츠 사이즈 : `width` - `padding` - `border` # 15일차(웹폰트) - [눈누](https://noonnu.cc/) - 무료 사업용 한글 폰트. 웹폰트 사용가능, 다운로드 가능 - [구글폰트](https://fonts.google.com/) - 무료 상업용 영문 폰트, 웹폰트 사용 가능, 다운로드 가능 - 장바구니 형식, 많이 담으면 용량이 커서 좋지 않다. - 많이 사용하는 두께는 400,700이다. - 'link' 방식으로 가져온 건 `html`에 넣어야 하고. `@import` 방식으로 가져온 건 `css`에 널어야 한다. - `@import`로 시작되는 코드는 css의 가장 위쪽에 배치한다 `@font-face`보다 위쪽에 배치해야 적용된다. - `font-family`의 속성값에는 여러개가 들어갈 수 있는데, 앞쪽에 있는 폰트가 우선 적용이 되고, 지원을 하지 않으면 다음 순서의 폰트가 적용된다. - [추가 지식 : em과 rem](https://www.daleseo.com/css-em-rem/) - em과 rem은 배율이 아니다. `기본값*배율`이 아닌 각 사이트마다 초기로 잡아주는 px값에 곱하기다 기본값이 0이라 할지라도 사이트마다 픽셀이 정해져있기때문에 rem을 그냥 사용해도 `0*rem`이 아닌 `사이트 값*rem`이 나온다. ## box-shadow - 요소에 그림자를 만들어 주는 css 속성 - `box-shadow : x축 y축 흐림값 퍼짐값 색상` - x축 y축 값은 필수로 들어가야 한다. - 색상값을 주지 않으면 기본적으로 검정색으로 나오는데, safari에서는 투명으로 나온다. 웬만해서는 색상을 주도록 하자. - 그림자의 색상을 주지 않으면 `color` 속성에 의해 그림자의 색상도 같이 변경된다. - 안쪽 그림자를 만들 때, 속성값 맨 앞에 `inset`을 붙여 준다. - 예시) ```css box-shadow : inset 10px 10px gray; ``` - 그림자를 여러개를 만들 수 있다. - 예) ```css box-shadow : 10px 10px black, inset 10px 10px gray;` ``` # 16일차(container 라이브러리, img-box 라이브러리) - class는 모듈이랑 같다. 즉 한 개의 기능을 가지고 있으면 다른 기능을 하나의 클래스에 추가하는 것이 아니라 새로운 클래스를 만드는게 관례다. - img를 사용 할 경우, div로 감싸서 class로 감싸주는게 관례이다. 그 이유는, img width에 %를 줄 때, 부모의 width에 영향을 받기 때문이다. - 그 이유는 크기를 img로 조절하는게 아니라 이를 감싼, div로 조절하기 때문이다. ## container 라이브러리 - 웹 페이지의 내용이 담겨 있는 부분을 컨테이너라고 부른다. - 컨테이너 라이브러리 - 2번째 컨테이너는 수정이 가능한 부분이기에 별도로 분류해놓았다. --> 임시로 1200px이기때문에 이를 바꿔도 무관하다. ```css .con{ maring-left : auto; maring-right : auto; }; .con{ width : 1200px }; ``` ## img-box 라이브러리 - 어떤 이미지를 반응형으로 만들고 싶을 때 부모인 `div`를 만들어 `img-box`를 걸어주면 된다. - img-box 라이브러리 ```css .img-box>img{ width:100%; display:block; } ``` - `width:100%`를 주어 부모의 너비 사이즈를 따르게 만든다. - 부모가 너비가 주어져 있지 않은 `block` 요소일 경우, 이미지가 반응형이 된다. - `display:block`은 `img`가 `inline`요소 이기 때문에, `img-box` 안에 여백이 생기는 것을 없애주기 위해 넣는다. - 사용 예제 ```html

``` ## 랜덤 이미지 사이트, 로렘 픽숨 - [Lorem Picsum](https://picsum.photos/) - 랜덤 이미지 가져오는 방법 - `https://picsum.photos/너비/높이` - 지정된 이미지 가져오는 방법 - `https://picsum.photos/id/이미지번호/너비/높이` ## z-index - z-index : 양수 우선권을 가짐 - z-index : 음수 우선권을 잃음 - z-index는 position : absolute랑 relative만 적용됨 ## float - `block` 요소는 `float` 요소를 무시한다. - `float:left` : 좌에서 우로 나열된다. - `inline-block`처럼 작동한다. 여백 없이 딱 붙는다. - `float:right` : 우에서 좌로 나열된다. - `clear:both` : `float`계의 줄바꿈, 적용시킨 요소부터 새로운 줄에 나온다. - `clear:both;`를 적용시키기 위해서는, 반드시 `dispaly`가 `block`이어야 한다. - `float`를 사용하게 되면 부작용이 생긴다. `block`이 `float`를 무시하게 된다. - 해결방안 - 부모에 `::after`를 붙여서 높이가 0인 막내를 만들어 형들 아래에 깔아준다. ## float-grid 라이브러리 ```css .float-grid>*{ float:left; box-sizing : border-box; } .float-grid::after{ content:""; display:block; clear:both; } ``` # 17일차(console, 문장과 숫자) ## console - console 창은 프로그램의 내부 정보를 보여주는 창이다. - 개발자를 제외한 사용자는 볼 일이 거의 없다. - console 창에 기록하는 법 - `console.log("내용");` - console 창 기록 지우는 법 - `console.clear();` - 코드팬은 수정이 되면 자동으로 렌더링 되기 때문에 js 꼭대기에 `console.clear();`를 꼭 써줘야한다. - 자바스크립트는 위에서부터 한 줄 한 줄 실행이 된다. ## 문장과 숫자 - js에서 문장과 숫자를 더하면, 숫자가 문장화 되어 더해진다. - 예) "안" + 10 = "안10" - 예) "안" + 10 * 20 = "안200" - 문장은 따옴표로 감싸주어야 한다. ## 변수 - 값, 저장소, 공간 - 변수 선언 방식에는 `var`,`let`,`const`가ㅣ 있는데 `let`만 사용한다. - `var`는 중복 선언때문에 혼잡해질 수 있다. - 변수에는 값이 1개가 들어간다. - 변수명은 숫자로 시작해서는 안 된다. - 똑같은 이름의 변수를 중복 선언하면 안 된다.(`let`과`const`만) - 예) `let x; let x = 0;` (X) 절대 안 됨! - 변수는 `=` 기호 좌측에 있을 때만 공간으로 취급한다. # 18일차(Jquery,조건문,함수,onclick) ## 제이쿼리 - 자바스크립트를 조금 더 편하게 쓸 수 있도록 하는 추가 도구 ``` html ``` - 제이쿼리로 css 선택자 불러오는 방법 ```javascript $("div") ``` - 제이쿼리로 css선택자 지정하는 방법 - `$("선택자").css("속성명","속성값");` ```javascript $("div").css("width","100px"); ``` ## 조건문 문법 - 조건문 문법 - if + 소 + 중 ``` javascript if(2<10){ console.log("참이다."); } ``` - 소괄호 안의 내용이 참이면 중괄호 안이 실행된다. - `if`-`else if`-`else` 로 조건문을 묶어 줄 수 있다. 앞의 조건문이 참이면 다음 조건문은 넘긴다. - 마지막 `else`에는 소괄호를 이용해 조건을 달지 않는다. ## 연산자 - `==` : 같다. - `!=` : 같지 않다. - `||` : OR, 둘 중에 하나라도 참이면 참이다. - `&&` : AND, 둘 다 참이여야 참이다. - `!` : NOT, 반전시키다. - 예) `!true` => `false` ## 함수 - 함수 문법 - function + 함수이름 + 소 + 중 - 함수 이름은 중복되어서는 안 된다. - 함수를 만들고 나서, 실행을 해 줘야 작동한다. - 실행하는 방법 : 함수이름(); - 함수는 소스코드 조각을 모아 놓은 것이다. ## 자바스크립트 - `` - 해당 속성이 있는 요소를 클릭했을 때, 자바 스크립트가 실행됨 - `onclick` 속성은 시작태크에 쓴다. `click`과 헷갈리지 않도록 주의해야한다. # 19일차(click,mouseenter,mouseleave,addClass,removeClass) ## click - 클릭했을 때 이벤트 발생, 제이쿼리 - 예) `$(".btn-popup-1").click(Popup1__show);` - .btn-popup-1을 클릭했을 때, 함수 Popup1__show 실행 ## mouseenter와 mouseleave - `mouseenter` : 마우스를 올렸을 때 이벤트 발생 - `mouseleave` : 마우스를 뗏을 때 이벤트 발생 - 유사 개념으로 `mouseover`와 `mouseout`이 있는데 사용하지 않도록 한다. ## addClass와 removeClass - 클래스를 추가,제거하는 제이쿼리 메소드 - `.css()`를 사용하여 스타일을 주는 것보다 좋다. `.css()`는 웬만해서는 사용하지 않도록 하자. - 난이도도 훨씬 쉽고, 유지보수에 좋다 - 문법 - `$("선택자").addClass("클래스명");` - `$("선택자").removeClass("클래스명");` - 클래스명을 넣을때 .은 붙이지 않는다. # 20일차 - [flex 유용한 사이트](https://studiomeal.com/archives/197) - [flex 개구리](https://flexboxfroggy.com/#ko) # 21일차(this) ## $(this) - 함수를 실행하는 요소가 여러 명일 때, 누가 실행했는 지 알려준다. - `$(this)`를 사용할 때에는, `let $this = $(this);`처럼 변수에 담아서 사용하는 것이 좋다. - 변수명 `$this`에서 $는 그냥 변수명일 뿐이다. 특별한 기능은 없다. # 22일차(jquery 탐색 메소드) ## jquery 탐색 메소드 - 형제 요소의 탐색 - `.siblings()` : ~의 형제, 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소(작성하지 않을 경우 모든 형제)를 선택한다. - `.next()` : ~의 인접 동생, 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다. - `.prev()` : ~의 인접 형, 선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다. - 하위 요소의 탐색 - `.children()` : ~의 자식들,선택한 요소의 자식 요소를 모두 선택한다. - `.find()` : ~의 후손, 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택한다. 괄호 안에 선택자를 작성해야한다. - `.find("*")` : 선택산 요소의 모든 자손 선택 - 상위 요소의 탐색 - `.parent()` : ~의 부모, 선택한 요소의 부모 요소를 선택한다. - 유사 개념 : `.parents()`는 선택한 요소의 상위 요소를 모두 선택한다. - [시간별 색깔 바꾸기](https://codepen.io/vexxxx/pen/MWrXJLz) ## jquery 이펙트 메소드 - `slideUp()` : 선택한 요소의 높이를 높여가며 사라지게 한다. - `slideDown()` : 선택한 요소의 높이를 낮춰가며 사라지게 한다. - dlvprxm gyrhkfmf wpdjgksms apthem - `.stop()` : 선택한 요소를 실행 중인 이펙트를 즉시 중산시키낟. - 예) 이펙트가 적용된 요소를 연속으로 클릭했을 때, 계속해서 실행되는 것을 끊기게 한다. - `$this.find("> .faq-box__answer").stop().slideUp(300);`