$$config title: 웹 수업 강사자료 keywords: - 강사자료 - 웹 $$ # 강사자료 - [웹 강의 정리](https://to2.kr/bmw) ## 3월 16일 수업진행 - 1강 개요 설명(수업 페이지 소개) - 2강 코드펜 세팅(원하는 배경색 지정, 폰트 지정) - 3강 코드팬 에디터 사용방법 - 크롬 열고 - codepen.io/pen - 적고 외우는 걸 추천 - new pen 해도 좋지만 외워서 작성하는 것이 좋다. - 레이아웃 좌측으로 빼서 세팅 - html 더블 클릭 - html 입력할 수 있도록 최대한 늘어남 - css, js 동일 - html 더블클릭하면 원상태로 돌아온다. - js는 안쓰기 때문에 html, css만 납둔다. - 커서가 깜빡이는 상태서 ctrl + s 를 하면 주소가 바뀐다.(메모장 띄어서 보여주기) - 이 주소는 언제든 보존 된다. 사이트에 저장된다. - yourwork 에 들어오면 내가 저장한 코드펜을 볼 수 있다. - 복습할 때 정말 좋다. - 4강 html, css, js 개요(컨버스 사이트 보여주기) - 5강 기본적인 타이핑 방법 안내(알파벳 작성, 자기소개, 글씨 복사 붙여넣기) - 6강 크롬관련 단축키 설명 - 윈도우 + 방향키(페이지 위치 변경) - Ctrl + T (새탭 생성) - Ctrl + W (탭 삭제) - Ctrl + Page Up(탭 왼쪽으로 이동) - Ctrl + Page Down(탭 오른쪽으로 이동) - Home(페이지 최상단으로 이동) - End(페이지 최하단으로 이동) - 구글, 네이버, 다음을 열고 탭 3개를 자유롭게 이동해보기(단, 마우스를 쓰지 않고) - 7강 subject 태그와 content 태그를 적용해주세요. - 제목과 내용을 작성 - "안녕하세요." - "저는 컴퓨터 학원에 다니는 홍길동입니다." - 무엇이 제목이고 무엇이 내용일까요? -> 사람을 감이란게 있기 때문에 알 수 있다. - 그러나 컴퓨터는 무엇이 제목이고 무엇이 내용인지 알지 못한다. - 제목이 영어로? subject - subject 태그로 안녕하세요 감싸기 -> 해보라고 하기 - 내용은 = content -> 이것도 동일하게 content태그 집어 넣기 - tab, shift + tap 설명 - 태그는 수미상관이 맞아야 한다. 첫번째 태그가 끝나 시작된 지점과 끝나는 지점의 위치가 같아야 함. - 내가 잘못 했을 때 한번에 맞춰주는 기능이 있다. - 톱니바퀴 클릭 -> Format Html 클릭 -> 자동정렬 - 이렇게 지정해 줬을 때 컴퓨터는 여기부터 여기가 제목이고 내용인지를 구분할 수 있다. - 태그는 화면에 출력되지 않고, 이 안에 들은 내용이 무엇을 가르키고 있는지 알려준다. - 메모장 켜서 인스타그램으로 설명(안산에서 아는 사람과 역 앞에서 무슨 파스타를 먹는다.) - 해시태그를 붙인다. 붙이는 이유에 대해 설명 - 사람이 (안산에서 아는 사람과 역 앞에서 무슨 파스타를 먹는다.) 이 글을 읽으면 핵심 키워드가 뭔지 안다. - 그러나 컴퓨터는 모른다. - 그런데 #파스타 #중앙역 이렇게 태그를 걸어줬을 경우 파스타를 검색 했을 때 저 글이 검색 되는지 여부 묻기!! - 태그 = 꼬리표 -> 이 글에다가 꼬리표를 붙여준다. - 여는 태그, 닫는 태그 설명 -> 열고 닫고 있는 이유 설명 - 경계가 있고 이 글이 제목이라는 걸 알려주기 위해서 여는태그와 닫는태그로 구성 - 꺽새로 감싸주는건 같고, 이름도 같아야 하고, 다만 닫는 태그 앞에 슬래쉬가 들어간다. - 실무에서도 저걸 서브젝트 태그라고 하는데 틀린말 - 여는 태그, 닫는 태그 그리고 그 안에 있는 구성요소, 이 한 묶음을 엘리먼트라고 한다. - 엘리먼트가 몇개 있는가? 2개 - 태그는 몇개 있는가? 여는태그, 닫는태그 각각 2개씩 - 결과 안보고 태그 적용해 보기 - 8강 엘리먼트의 스타일 적용 - 소스코드가 나오는 걸 랜더링이라고 한다. - 태그를 그냥 쓴거랑 안쓴거랑 차이가 없다. 그러면 왜 쓰는가? - 랜더링이 안되는 경우 Ctrl + Shift + 7 - 비유를 하나 - 출력해서 나오는 부분을 영화라고 할 때 - HTML - 배우 대기실, CSS - 배우를 꾸며주는 스타일리스트 - {} -> 작성법 간단 설명 - { color: red; } - 메모장 열어서 배우 2명, 코디 1명 - 스타일리스트가 일을 하는가? 안하는가? 안하는 중 -> 배우를 만나지 못했기 때문에 - 배우가 스타일리스트를 찾아가는게 맞는가? 스타일리스트가 배우를 찾아가는게 맞는가? - CSS는 앞에다가 검색어를 작성해줘야 한다. - content를 작성하면 스타일리스트는 몇명의 배우를 찾아가고 있는가? 1명 - 컨텐츠라 검색한 결과를 찾아가는 것 - { font-size: 20px; } 입력 - 추가로 content 내용 { background-color : gold} -> 자동완성 방법 설명 - subject 글씨크기, 배경색 동일하게 적용해보라고 과제 - 9강 HTML, CSS 공부방법 - 잘못 배우게 되는 경우 어떻게 되는가? - 정해진 태그만 사용해야 하는데 태그의 종류가 엄청나게 많음 - 이걸 다 외우는게 공부하는게 아니고 2~3개 정도 외우면 된다. - css 속성 같은 경우에도 엄청나게 많다. - 이걸 배우는게 공부냐? - 디자인 레이아웃이라는게 있다. display, position 이라는게 있고 - html, css는 뭔가를 많이 아는 게 아니라 잘 조합해서 쓸 줄 알면 된다. - 10강 배경색이 red인 사각형 만들기 - 알려준 태그 서브젝트, 컨텐트 태그는 없는 태그 - 쓸 수 있는 태그 알려줌 div, section, nav, article 이걸 외워라 - 이걸 언제 쓰는건지 궁금해 하지 않으셔도 됩니다. 이 4가지 태그의 차이점은 없고 이름만 다르다. - 메모장으로 보여줌 div 쓸 때 일일히 작성하는 거 불편 - div 쓰고 커서를 오른쪽에 둔 상태에서 tab 누르면 알아서 바뀜 - div 작성, css 배경 red로 작성한 후 엘리먼트 몇개인지 물어보기 - div를 검색하면 div엘리먼트 하나가 검색이 된다. - 배경은 red로 지정해 줬는데 왜 보이지 않을까? - 높이를 100px 줘보기 - 나옴 - 지웠을 경우 높이가 100px은 아니었을 거에요. - 가운데를 클릭하시면 늘리거나 줄일 수 있다. - 넓이를 딱히 지정 안해줬는데도 나오는 걸 봐서 - 10px, 0px 로 변경 - 빨간색이 안나오는 원인은 넓이가 없어서일까? 높이가 없어서일까? 정답 : 높이 - 빨리 배우려면 실험을 해봐야 한다. -> 숫자 1234 넣어보기 - 글자를 넣으니 알아서 높이가 측정되서 배경색이 나온다. - 넓이가 필요 이상으로 끝까지 늘어나는데 - 글씨를 지워보면 배경색이 사라진다. - 지금 안나오는 건 넓이가 아니라 높이가 없어서 안나오는 구나 라는 것을 알 수 있다. - div는 높이를 딱히 지정해 주지 않으면 높이가 없구나 라는 것을 알 수 있다. - width 500px 줘보기 -> 넓이가 줄어드는 걸 확인 -> 딱히 지정해 주지 않은면 최대한으로 늘어난다. - 11강 배경색이 다른 사각형 3개 만들기 - 처음에는 과제로 내주기 - div*3 알려주기 - div > css 주기 - section, nav로 체인지 - 각각의 태그에 css 부여 - section, nav 넓이를 다르게 줘보기 50%, 600px - 원래 숨겨져 있는 부모 엘리먼트가 있음 (이건 지금 안해도 상관x) - 안보이지만 부모 넓이의 반이다 - 12강 css 기본값 설명 - div(안녕) section(잘가) - div + section 해도 한번에 만들어짐 - div, section != div section 완전히 다르다. - div, seciton 공통으로 폰트주고 - 각각 배경색 red, green 부여 - 폰트 사이즈는 무슨 영역? - 디자인의 영역 - 폰트 사이즈를 지운다하여 사라지는 것이 아닌 기본값이 나온다. - 디자인을 지정해 주지 않아도 기본적으로 갖고 있는 속성값이 있다. - color:black 을 주지 않아도 기본값이 들어있다. - css 엘리먼트가 갖고있는 기본 속성 값을 바꿔준다. - color: black 부여 해도 div 스타일이 변하지 않는 이유는 기본적으로 div는 color:black을 갖고 있다. - div에 display:block 해도 변화가 있나? - 없죠 기본적으로 div는 display가 block이 뭔지는 몰라도 block 값을 갖고 있다. - display:inline-block을 부여 변화가 있나? 있다 - 뭔지는 몰라도 기본값이 inline-block은 아니구나 - 두개 다 부여 했더니 이렇게 나온다. - 13강 blcok과 inline-block의 차이점 설명 - 과제 내주기 - 첫번째 거는 넓이 100px에 높이 auto가 들어가 있다. - 넓이 : auto는 참고로 div가 갖고 있는 기본값. - 딱히 안쓰면 기본적으로 auto 값이 들어가 있다. - section, nav는 높이를 따로 지정 - display:inline-block 을 block로 바꿨을 때 변화를 확인 - 이 상태에서 div 넓이를 지워보겠습니다. 어떻게 변하죠? - 넓이가 최대한으로 늘어나는 걸 볼 수 있습니다. - 이걸 통해 무엇을 알 수 있냐? display:block 일 때 넓이가 최대한으로 늘어난다. - div만 display:inline-blcok 줬고, 나머지는 block 이다. - width:auto 로 바꾸는 거나 지우거나 같은 의미 기본값이라는 의미 - auto로 바꾸면 변하는 현상 - div가 display:inline-block일 때 넓이가 최소한으로 줄어든다. - 그러면 이것도 해봐야 한다. 숫자 1을 하나 더 추가해본다. - 넓이가 유연하게 늘어나는 모습을 볼 수 있음. 아예 지우면 어떻게 되는가? - 넓이가 0이 되는 모습을 볼 수 있다. - inline-block 일대 넓이가 없으면 '최소한으로 줄어든다.' - 전부다 block으로 교체 - div에 높이를 500px 준다. 높이를 빼면은 최소한으로 줄어드는 모습을 볼 수 있다.(다른것도 테스트) / block요소 - 높이는 '최소한으로 줄어든다' - 모두 inline-block 로 변경 - 높이를 지웠을 때 변화 확인. -> 높이가 줄어든다. - block과 inline-block 은 넓이에서 차이가 드러난다. - 높이 같은 경우에는 block 이던 inline-block 이던 높이가 지정되지 않으면 '최소한으로 줄어든다' - 기본 값이 block이긴 때문에 지우기만 해도 block 상태가 된다. - 공간이 넓은에도 한줄에 하나씩만 나온다. - 배열방향 : 세로방향으로 한줄에 무조건 1개씩 - 전부다 inline-block 로 바꾸면 전부다 어떻게 변하나? - 배열방향 : 가로방향으로 한줄에 무조건x 최대한 많이 나온다. - (공간이 있으면 많이 나오지만 그렇지 않으면 나올 수 있을 만큼 나옴) # 3월 18일 수업자료 ## 16일 배웠던 blcok, inline-block 13강 간단하게 설명 ## 14 강 section(green)색 막대와 article(blue)색 막대를 한 줄에 보이도록 - <처음에 풀어볼 수 있도록 시간주기> - div, section, article 이 있죠. - 문제는 section과 article을 한 줄에 보이게 해달라고 하네요. - 어떻게 하면 되죠? - section -> display:inline-block -> 여기서 많이 당황합니다. -> 갑자기 막대가 사라지니깐 - why? - inline-block 특징상 넓이를 지정해주지 않으면 0이 되니깐. 넓이를 지정해줘야겠죠? - width : 100px -> 이렇게 해주면 됩니다. - 마찬가지로 article 도 inline-block 주면 넓이가 확 줄어드는 모습을 볼 수 있죠? - 그래서 최소한의 넓이를 가져야 하니깐. section과 동일하게 width 값을 100px 주면 - 한줄로 구현되는 걸 볼 수 있습니다. ## 15강, 글자 꾸미기 - 글씨를 결과 미리보기와 같은 모양으로 꾸며 달라는게 문제죠? - font-size : 140px -> 이게 어떤 말인지 아시겠죠? -> 140px이 뭐냐면은 글자 하나하나가 140px이라는 말입니다. - 그리고 여러분이 이런 것도 테스트 해보셨어야 해요. - 이렇게 한번 해볼게요. 기존에 있던 font-size 밑에 새롭게 font-size:3rem 줘볼게요. - 이렇게 하게 되면 컴퓨터는 위에 폰트 사이즈를 인식하는 것이 아니라 아래 폰트 사이즈를 인식하게 됩니다. - 그래서 아무리 위에걸 변경해도 아래 폰트 사이즈를 인식하기 때문에 나중에 써준 폰트사이즈가 입력되는 겁니다. --- - font-weight:bold -> 폰트웨잇은 글씨의 굵기정도를 말하는데, bold를 지정해주면 글씨가 굵어지는 걸 볼 수 있습니다. - 그런데 여기서 font-weight:nomal 이라는게 있는데 nomal을 주게 되면 글씨의 변화가 없습니다. - 노말을 지우나 지우지 않나 변경되는게 없죠? 그렇다는건 무슨의미에요? - font-weight의 기본값은 nomal이라는걸 알 수 있습니다. -> bold 변경 - 그리고 letter-spacing 이라는 스타일 속성이 있는데, 이걸 100px 주게 되면 - 현재 자간보다 100px 더 늘린다는 뜻입니다. - 제가 이걸 -10px 주게 되면 현재 기존 자간보다 -10px 줄인다는 의미입니다. - 즉, letter-spacing 은 자간입니다. --- - 그 다음에 section은 font-size를 10rem 주겠습니다. - 10rem 이 무슨 뜻이에요? 기존의 가지고 있는 글씨 크기의 10배를 주겠다라는 의미입니다. - 자 여기서 어려워요. --- - color를 red, green, blue 가지고 모든 색을 표현할 수 없기 때문에 우리가 쓰는게 하나 있습니다. - color : rgba(); 라는 걸 씁니다. rgba 가 뭔 뜻이에요? - red, green, blue -> a는 알파값이라는 뜻이에요. --- - 이 안에는 0 ~ 255까지 가능합니다. - 제가 이 안에다가 (255, 255, 255); -> (255, 255, 255, 1); -> 마지막에 1을 줘볼거에요. - 1은 무슨의미냐면, 불투명도를 의미합니다. --- - 지금 안나오는데, 빛의 3원색의 원리에 따라 red, gren, blue 를 제일 세게 주게 되면 하얀색이 되죠? - (0, 0, 0, 1) -> 0, 0, 0 이렇게 하면 뭐에요? -> 검정색이죠. - 1은 뭐 불투명이라고 말씀드렸고, 0.5 하면 뭐에요? -> 반투명 - 이걸 0.2를 주면 거의 투명해서 안보입니다. --- - 이걸 다 외우지 못해도 이건 아셔야 합니다. - red를 최대한으로 주게 되면 빨간색이 되는거고 - green을 가운데걸 최대한으로 주면 되고 - blue는 마지막거 --- - red 255 , blue 255 -> 이렇게 하게되면 보라색, 자주색이 나옵니다. - 여러분이 이걸 할 수 있어야 합니다. 만약 여기에 256을 쓴다? 그러면 요거에 대해서 이해를 못한 거에요. - 여기는 0 ~ 255 까지 쓸 수 있고 - 이렇게 하면 색의 조합은 65000개까지 나옵니다. --- - 그런데 여러분이 색 조합을 다 알기는 어렵잖아요? - <구글 키고> - 그러면 google에 color picker라 치면 이런식으로 이렇게 나옵니다. --- - 그리고 color:#FF00000F; 이거는 rgba랑 똑같습니다. - 앞에 #을 붙여주면 이걸 16진수로 쓸 수 있습니다. --- - # 쓴 다음에 첫 번째거 두 개가 뭐에요? -> R - 두 번째 두 개는 G - 세 번째 두 개는 B - 맨 뒤에 는 알파값 --- - 이런식으로 color를 표현 할 수 있습니다. - [color 사이트 하나 공유](https://material.io/resources/color/#!/?view.left=0&view.right=0) --- ## 16강, 엘리먼트, 부모, 자식, 형제 관계 - section, div 생성 - > 엘리먼트가 몇개죠? -> 2개 - div 안에 nav*3 --- - 이러면 엘리먼트가 몇개인거죠? - section 1개, div 1개, nav 3개 -> 총 5개가 맞습니다. --- - div와 nav 관계는 부모 자식 관계라고 합니다. - 나를 감싸는 엘리먼트를 부모 엘리먼트라고 합니다. - 그리고 부모 엘리먼트가 감싸고 있는 이 녀석을 자식 엘리먼트라고 부릅니다. --- - 첫번째 있는 nav는 몇 번째 자식일까요? - 첫번째 - 두번째, 세번째 --- - 그러면 div와 nav 는 부모 자식 관계인데. - 첫 번째 nav와 두 번째 nav는 어떤 관계 일까요? -> 형제 관계 - 얘 부모랑 얘 부모가 같기 때문에 --- - 그렇다면 section과 div는 무슨관계일까요? -> 형제 관계 - nav와 nav 가 형제 관계인 것처럼 - 왜 그렇죠? body라는 큰 틀이 여기 있는 엘리먼트를 감싸고 있기 때문에 --- - 그러면 section과 nav는 무슨관계일까요? 형제의 자식 -> 조카가 되겠죠? - HTML에서 엘리먼트의 관계는 딱 두 가지밖에 없어요. 부모, 자식 관계랑 형제 관계. --- - table 안에 tr 넣기 -> 엘리먼트 몇개 있는건가요? -> 2개 - tr 안에 td*3 -> 이러면 엘리먼트가 총 몇개 있는거에요? -> 5개 --- - 이렇게 하면 table 안에 자식이 몇명이죠? table에 자식은 한명입니다.(tr 줄이기) - 보통 자식의 자식을 자식이라 부르지 않잖아요? --- - 그렇다면 tr의 자식은 몇명이에요? 3명 - 그렇다면 table의 후손은 몇명이에요? tr 1 하나, td 3 라고 보시면 됩니다. --- - table의 자식은 tr하나, table의 손자는 td 3개 입니다. ## 17강, 테이블 태그 - 테이블이라는 걸 한번 알아보겠습니다. - 테이블은 과거 한 2005년 즈음에 웹페이지의 레이아웃을 테이블로 잡았습니다. - 그런데 지금은 표를 만들 때만 쓰셔야 합니다. - [한양대학교 에리카 예시](https://www.hanyang.ac.kr/web/www/erica-campus1) --- - <문제 열기> - 이건 어떻게 보여주는게 좋을까요? - 시간 표로 보여주는게 좋겠죠? --- - <새 코드펜 열기> - table 생성 - table 안에 세로줄 3개를 만들겁니다. -> tr*3을 만들겁니다. -> 이렇게 하면 줄이 3개입니다. - 이게 첫번째 줄이요? -> 첫번째 tr 안에다가 td 생성 -> 칸은 td라고 합니다. table 데이터 --- - 모든 tr 안에 td 생성 후, 2번째 3번째에 국, 영 작성 - table에 border="1" -> border는 테두리를 의미 - 위에 칸을 비워둔 이유는 시간표 "월" 을 넣기 위해서 --- - 그 다음에 월 옆에는 뭐가 있어야 해요? -> 화요일 - 테이블에 첫번째 tr이 두칸이면은 두번째 tr도 칸을 두칸으로 맞춰주셔야 합니다. - tr = table row라 해서 테이블에 줄이라고 보시면 됩니다. --- - 수요일을 추가하려면 어떻게 하면 되죠? -> 이렇게 하면 됩니다. - 이렇게 되면 첫번 째 줄이 세칸이니깐 나머지 줄도 세칸으로 맞춰주셔야 합니다. - 일본어, 음악 추가 --- - 일본어의 칸이 늘어났잖아요. 그러면 이 녀석만 늘어나는 것이 아니라, - 여기에 해당 되는 다른 칸도 같이 늘어나게 됩니다. --- - 그리고 이 앞에 뭐가 있으면 좋죠? 1교시, 2교시가 있으면 좋잖아요. - 1, 2교시 추가 --- - 표를 보시면 결국에 여기에서 메인 데이터가 요거라는거 아시겠나요? - 과목이 표라 보시면 되고 나머지는 메인 데이터의 부가적인 요소라고 보시면 됩니다. - '월' 같은건 부가 정보잖아요. 조금 더 중요한. --- - 그런 것들에 경우에는 td가 아니라 th로 감싸는게 약간의 관례입니다. - 월화수도 덜 중요하니깐 th로 해주게 됩니다. - 그러면 이렇게 테이블을 짤 수 있습니다. --- ## 18강, 테이블 태그 보강, 테이블 꾸미기 - 테이블을 보강해보겠습니다. 사실 앞전에 만든 테이블은 잘 못된거에요. - 원래라면 table의 자식으로 tr이 바로 올 수 없습니다. --- - 첫 번째 tr은 머리 부분이고, 두, 세번째 tr은 몸통 부분이죠? - 그래서 머리 부분은 thead로 감싸야 하고, 몸통 부분은 tbody로 감싸야 합니다. 무조건 그래야 합니다. - 만약에 머리, 몸통 구분이 없다. 그러면 tbody로 감싸면 됩니다. --- - thead 해서 첫번째 잘라넣기 해서 넣고 - tbody 해서 잘라 넣기 하겠습니다. - 정리는 포맷 누르면 됩니다. --- - 보시면 thead 에는 tr이 하나 들어있고, tbody에는 tr이 두개 들어 있는 걸 확인하실 수 있습니다. - 그 다음에 보시면 칸마다 경계가 있는걸 볼 수 있는데, 이걸 싫어하는 사람이 있을 수 있잖아요? --- - css 작업!! - table { border-collapse: } -> border-collapse라는 스타일 속성이 있는데 - collapse 상쇄시키다 라는 뜻을 지니고 있습니다. - 그래서 이렇게 하시고 속성 중에 collase 로 하게 되면, 여러분이 잘 아는 표 스타일이 되는걸 볼 수 있습니다. --- - 과제 시작!! ## 19강, display 속성과 관련된 문제, 복습 - 19강은 우리가 기존에 배웠던 걸 복습하는 것이라 보시면 됩니다. --- - display가 block 일 때 넓이가 최대한으로 늘어난다. - inline-block 일 때 넓이가 최소한으로 줄어든다. --- - 여기에다가 쓸라면 이제 어디에가 써야 하는지 아시겠죠? --- - 높이는 block이던 inline-block 이던 최소한으로 줄어든다. - 한줄은 block 인경우 무조건 혼자 쓴다. - inline-block 는 한줄에 최대한 여럿이 옆으로 나온다. --- - 과제 시작 ## 20강, a와 br - 안녕을 치고 밑에다가 ㅋㅋ 치면 한줄에 다 나옵니다. - 안녕 치고 한칸을 띄어서 ㅋㅋ 를 쳐도 한줄에 다 나옵니다. - 한칸 띄우게 되면 한칸 띄운걸 표시를 해주지만 아무리 많이 띄우고 탭을 쳐도 변화가 없다. --- - 그래서 내가 줄을 바꾸고 싶을 때 쓰는 것이 바로 "br" 입니다. br 탭 - 여기서 br이 다른 엘리먼트 들과 어떤 차이점이 있을까요? - 다른 엘리먼트는 열고 닫고라는게 있지만 br은 '셀프 클로징 태그'라고 해서 그냥 하나짜리에요 - "/br" 이렇게 쓰려고 하면 안 된다. --- - br br - br br - 안녕 - br - ㅋㅋ --- - 네줄 띄어서 출력 되는 걸 확인 --- - a 태그 설명 - "저는 네이버가 좋습니다." -> 이렇게 했을 경우 '네이버'를 누르면 네이버 홈페이지로 넘어가게 하고 싶어요. - 어떻게 하면 되냐면 a라는 엘리먼트를 사용하면 됩니다. - 자 여기서 어떤 부분에 링크를 걸고 싶죠? 네이버 잖아요? - 그러면 네이버 부분만 a로 감싸 주면 됩니다. --- - 자 이제 누르면 네이버로 넘어가고 싶잖아요. -> href 지우기 - a에 보시면 속성이라는게 있습니다. - href="" class="" 작성 --- - 자 맞춰보세요. a 엘리먼트에는 속성이 몇개 있는거죠? 두 가지가 있는거에요. href 속성과 class 속성 - 속성은 세가지로 구성 되는데 속성명, 구분자, 속성값 -> 무조건 이 포맷을 따르셔야 합니다. - "" 요거 없이 그냥 쓴다던가 ' ' <- 이렇게 작성한다던가 하시면 안됩니다. 무조건 쌍따옴표입니다. - 다른 속성값은 나중에 다루기로 하고 - a태그에서 가장 중요한 속성이 href 라는 속성인데, 여기에 속성 값을 채워주셔야 해요. - href="https://www.naver.com" -> 이렇게 하면은 네이버를 클릭하면 네이버로 이동해야죠? - 이렇게 눌르면 이동해야 하는데, 코드펜에서만 이렇게 막혀 있습니다. -> 요거 있다고 당황x - ctrl + shift + 7 누르시면 다시 재 렌더링 해줘서 원래 상태로 돌아올 수 있습니다. --- - bmx 라는 사이트가 있다고 해볼게요? - 저는 BMX가 좋습니다 -> BMX a태그로 감싸기 -> href 에 bmx 사이트 주소 붙여넣기 --- - 자, 여러분들이 누르면 새 창으로 열리는 경우 있잖아요? - 그러면 a태그 안에다가 target이라는 속성을 넣고 "_blank" 라는 값을 넣어주면 - 네이버를 누르면 새 창으로 뜨게 됩니다. --- - a엘리먼트는 링크로 만들어준다. 언더바로 나오는 건 나중에 지울 수 있다. --- - 그러면 a 는 display의 기본값이 뭘까요? - 모든 엘리먼트에는 display 속성이 있고요. 그리고 display 기본값을 갖고 있습니다. - 그러면 a의 display 기본값은 뭘까요? - 생각을 해보셔야 해요. --- - a에다가 font-size: 4rem 줘보기 --- - a 가 display:block 이라면 이렇게 한 줄에 나올 수 있을까요? - a 의 display:block 을 줘볼게요. -> block으로 했는데 바뀌었나요? 안 바뀌었나요? - block 넣고, 빼고 변화 확인! - 디자인이 바뀌는게 보이나요? - 그렇다면 이게 무슨 뜻이에요? - a의 display 기본 속성 값은 block이 아니라 inline-block 라는 뜻이에요. - 그래서 a를 inline 엘리먼트라고 합니다. --- - inline 계열에 엘리먼트들이 몇개 있어요. - 웬만한건 block인데 a는 display 속성값이 inline이다 보시면 됩니다. --- - 더 확실하게 확인하기 위해서 bgc를 red로 줘보겠습니다. - 한줄에 하나씩 나와야 block 이잖아요. - 배경색을 지우면 어떻게 된다고요? - 이렇게 되는건 inline의 특징이죠. - 정확하게 말하면 a는 inline-block이 아니라 inline 인데 그건 나중에 설명하도록 하겠습니다. - 아무튼 a는 기본적으로 display가 inline이다. 한 줄에 여러개가 같이 나오는거다. --- - 그러면 a가 왜 그런 선택을 했을까요? - 이런 링크는 글자들돠 한줄로 나와야 되잖아요? 그래서 기본적으로 a는 display가 inline이다. - 이렇게 이해하시면 됩니다. - 과제풀기 --- ## 21강, 각 사이트명에 링크를 걸기 - 자 이제 저는 여기 네이버, 구글, 카카오에 링크를 걸거에요. - 미리보기 처럼 나와야 하니깐 어떻게 하면 되요? - 네이버를 a로 감싸면 되죠? - 그리고 구글, 카카오도 동일하게 감싸면 되겠죠? - 그 다음 각각의 웹페이지 url 복사하셔서 - a에 href 속성 주시고 그 안에다가 붙여넣기 하면 되겠죠?(네이버, 구글, 카카오 해보기) --- - 그냥 이 상태로 클릭하게 되면 코드펜에서 원하는 웹페이지로 이동했는지 확인이 어려우니깐 - 새 창으로 열어서 이동하고 싶다. -> target 속성을 주면 되죠?(속성고 속성 사이 띄어 쓰기) - target="_blank" 이렇게 주시면 됩니다. -> 나머지도 동일하게 --- ## 22강, 젠코딩으로 네이버, 구글, 다음으로 가는 링크 생성, 1부 설명 - [젠코딩 설명](https://codepen.io/sangwon7242/pen/popgQYw?editors=1010) - [문제 풀이(한큐에 만들기)](https://codepen.io/sangwon7242/pen/OJzMrNR?editors=1000) - 전체 내용 읊어주고 한번 더 복습하기! # 03-21 수업 내용 - 지난 주에 배운 내용 복습하기! emmet(젠코딩) ## 23강, 후손선택자, 자식선택자 - div > a // 질문 : 꺽세의 의미가 무엇인가? 정답 : 부모자식관계 - div>a[href=""][target="_blank"]{네이버} - nav>a[href=""][target="_blank"]{구글} - section>a[href=""][target="_blank"]{다음} - 이렇게 젠코딩을 했을 때 a 엘리먼트는 몇 개인가? 정답 : 3개 --- - a { color: green; } -> a의 색상이 green으로 변경된다. - 강사가 원하는 건 a모두가 아니라 '네이버'만 선택을 하고 싶다. - 그런 경우 사용 하는데 앞에 div > a 이렇게 만들 수 있다. - div > a -> 이 경우 a는 a이지만 div의 자식으로 있는 a라는 의미이다. - div > a -> 요 조건을 만족하는 건 '네이버' 이거 밖에 없다. --- - a { color: pink; }, a { color: black; } - 이렇게 두 개를 작성하는 경우 a가 서로 다투는 경우가 발생한다. - 첫 번째 a의 bgc-pink 부여 -> 같은 a라도 서로 다른 속성을 부여하게 되면 상관없다. - 첫 번째 a는 배경색을 두 번째 a는 글자의 색상을 담당. --- - a { color: pink; }, a { color: black; } - 이런 식의 충돌이 발생한 경우 이 둘 중 어떤 a가 실행 되는가? 정답 : 둘 다 실행 - 처음에는 a를 pink로 변경해주고, 그 다음에 a를 black으로 변경해 준다. - 문장은 처음 온 사람의 말을 듣는 것이 아닌, 나중에 온 사람의 말을 듣는다. - 두 명의 a라는 스타일러가 div > a 로 있는 배우에게 찾아간 경우 a는 우선 순위를 선택해서 한 명의 말을 듣는다. - 이왕이면 처음이 아니라 나중에 온 녀석의 말을 들어준다. --- - 그런데 a가 단독으로 있는 것보다 더 큰 우선순위가 있는데, - div > a // div > a 이걸 선택자라고 부른다. - 선택자가 길면 길수록 부여 된 속성의 파워가 세진다. --- - div > a 는 div 안에 있는 a만 찾아가고 - 그냥 단독으로 있는 a는 a엘리먼트 모두를 찾아간다. - 그런데 div > a 가 더 파워가 세기 때문에 div > a 의 속성은 그대로 보존 되는 것을 확인할 수 있다. - 둘 다 div > a 인 경우에는 처음이 아닌 나중 것을 찾아간다. 그래서 black이 실행되는 것을 확인 가능. --- - table>tbody>tr>td*5 // 이렇게 테이블을 짠다 생각해 보자. - 질문 : table의 자식은 몇명인가? 정답 : 1명 - tr의 부모는 누구인가? 정답 : tbody - tbody의 부모는 누구인가? 정답 : table - tr의 아빠의 아빠가 table 다. table의 자식의 자식은 tr이다. -> 잘 기억해야 함. - 보통 우리가 자식이라고 하게 되면 밑에 학렬만을 의미한다. - 그러므로 table의 자식은 몇명이다? 정답: 1명(tbody) - 그렇다면 table의 손자는 몇명인가? 정답 : 1명(tr) - 질문 : table의 증손자는 몇명인가? 정답 : 5명(td*5) - 질문 : table의 후손은 몇명인가? 정답 : 7명(tbody, tr, tr*5) --- - 단군의 후손이 몇 명인지는 정확히 모르지만 10억 명이라 가정. - 단군의 자식은 엄청 많지는 않겠지만 10명이라 가정. - 자식과 후손을 헷 갈려서 안 된다. --- - 후손은 table에서 파생 된 모든 녀석들을 의미 - 자식은 table 바로 밑에 tbody를 의미한다. --- - table로 검색하게 될 경우 몇 개가 나오는가? 정답 : 1개 - table을 선택했다 해서 그 안에까지 다 선택 되는 건 아니다. - 엄연히 table과 tbody는 다른 존재이다. table은 table이고 tbody는 tbody이다. - table은 table만 짚는 거라 보면 된다. - css에 tbody를 검색하면 몇 명이나 나오는가? 정답 : 1명 - table > tbody 이렇게 하게 되면 뭐를 의미하는가? - table의 자식인 tbody를 의미한다. // 몇 명인가? 1명 - css에 td를 검색하면 몇 명이 검색 되는가? 정답 : 2명 - tbody > td 이건 무엇을 의미하는가? 정답 : td이지만 tbody의 자식인 td를 의미한다. - tbody의 자식인 td는 이 세상에 몇 명 존재하는가? 정답 : 없다. 2개라고 생각하면 안 된다. - tbody의 자식은 오직 tr밖에 없다. --- - 부모 자식 관계 - td의 부모가 누구인가? 정답 : tr - tr의 부모가 누구인가? 정답 : tbody - tbody의 부모가 누구인가? 정답 : table --- - tbody > td 이렇게 하게 되면 td는 오직 tbody의 자식이어야만 한다. - 그런 td는 tbody + td 이런 경우 밖에 없다. - tbody > td -> 그러므로 이건 존재하지 않는다. --- - tbody > tr > td // 이건 무엇을 의미하는가? - tbody의 자식인 tr의 자식인 td를 의미한다. - 이런 복잡한 조건을 만족하는 td는 몇 개가 있는가? 정답 : 2개 - tbody는 table의 자식이고 tr은 tbody의 자식, td는 tr의 자식이다. - tbody > tr > td // 이걸 만족하는 td는 몇개인가? 정답 : 2개 --- - [후손, 자식선택자 설명](https://codepen.io/sangwon7242/pen/popbNqB?editors=1010) --- - css에 td를 주게 되면 이건 무슨 뜻을 의미하는가? 정답 : 태그가 td인 엘리먼트를 찾아가라. - td는 몇개인가? 정답 : 2개 --- - td + td -> 이런 경우 td를 찾게 되는게 td의 동생인 td를 찾아 가게 된다. - 선택자가 길어지게 되면 마지막 것만 주목하면 된다. - 지금 현재 td의 동생은 하나 밖에 없다. --- - table td -> 새로운 개념 등장! -> 이게 후손선택자라는 의미이다. - table > td 이렇게 해주면 바로 밑에 단계인 걸 찾겠다는 의미이지만 - table td -> 이런 경우 table 안에 있는 td를 모두 선택하겠다는 의미이다. table 안에 td가 있기만 하면 된다. - td는 결과적으로 table 안에 존재한다. - table td 이렇게 검색하게 되는 경우 td는 몇 개인가? 정답 : 2개 - table > td 이렇게 하면 td는 몇 개가 선택 되는가? 정답 : 0개 - 꺽세의 의미? 자식이라는 의미 - table의 자식은 tbody 밖에 없다. - '>' // 자식선택자 라는 의미 - '띄어쓰기' // 후손선택자 라는 의미 --- - 처음에 작성했던 div > a 이걸로 넘어가기 - div a { color: black; } // 이렇게 하면 몇 개인가? 정답 : 1개 - 띄어쓰기는 div 안에 있는 a를 의미 하기 때문에 - div > a 이렇게 하면 a가 몇개인가? 정답 : 1개 - 1개인긴 하지만 div 자식으로 있는 a를 선택한다. 안에 들어있긴 하지만 바로 붙어 있어야 한다. --- - 이렇게 했을 때 a는 총 몇개 들어 있는가? 정답 : 2개 - div > a 검색// 위와 같은 경우 a는 몇개인가? 정답 : 1개 - section 안에 있는 a는 검색이 되는가? 정답 : 안 된다. - 2번 a가 검색 되는 이유가 무엇인가? 정답 : div 자식이라서 - div a 검색// 위와 같은 경우 a는 몇개인가? 정답 : 2개 - 후손선택자라는 의미이기 때문에 div 안에 있는 모든 a를 선택한다. --- - 우선은 꺽세만 사용해서 코딩을 할 수 있도록. ## 24강, 각각의 크기와 색상이 다른 링크 버튼 3개 만들기 - a { font-size: 10rem; } // 이렇게 하면 모든 a의 폰트 사이즈가 커진다. - div > a { font-size: 10rem; } // rem : 기본 font-size 에 10배의 크기를 부여하겠다. - div > a 또는 div a 이렇게 작성해도 괜찮다. -> 어차피 자식이 하나밖에 없기 때문에 - 복사 붙여 넣기 잘 활용할 것!! (마우스 안쓰는 연습 할 것!) - 자식선택자, 후손선택자 써도 상관없다. ## 25강, text-align는 대상 엘리먼트가 아니라 그것의 텍스트를 정렬한다 - 이 때 개념을 잘 잡아야 한다. - 코드펜 열고 - div가 가지고 있는 글자는 몇 개인가? section, nav - 띄어쓰기도 글자로 인식한다. - display는 inline요소와 block 요소로 나뉘어 진다고 말씀. - 글자 하나하나는 inline 요소인가 block요소인가? 정답 : inline 요소이다. --- - css에 div, section, nav {}-> 몇 개의 엘리먼트를 선택한 건가? 정답 : 3개 - 속성으로 border: 2px solid red; -> 몰라도 된다. - 첫 번째가 외곽선의 두께, 외곽선의 생김새, 외곽성의 색상 - 20px을 주게 되면 외곽선이 굵어지는 것을 확인할 수 있다. - solid - dotted -> dotted 는 점이라는 의미이다. - margin-top -> 지금은 몰라도 된다. -> 100px 부여 // 조금 떨어뜨리기 위해 - dotted -> dashed // dashed는 선이라는 의미 -> 지금은 몰라도 된다. - solid 만 알면 된다. - 이렇게 한 이유는 서로 간의 경계를 보여주기 위해서 --- - section { text-aligh: center } - text-aligh은 section을 가운데로 보내는 것이 아니라, 그 안에 있는 text를 정렬하는 거다. - 그렇기 때문에 section 은 가만히 있고 text만 가운데로 정렬이 된 걸 확인할 수 있다. - text-aligh:left 주게 되면 텍스트가 left로 정렬되어 있는 것을 볼 수 있다. - left를 지우면 어떻게 되는가? 정답 : 아무런 변화가 없다. - 그러므로 text-aligh의 기본값은 left인 것을 확인할 수 있다. --- - nav 텍스트 얼라인 라이트 주기 -> 텍스트가 오른쪽으로 정렬된 것을 확인할 수 있다. --- ## 26강, text-align 은 대상 엘리먼트의 글자와 자식 inline 요소만 정렬한다 - div가 가지고 있는 글자는 몇 글자인가? 정답 : -> 아마 이게 오늘 하는 것중에 제일 어려울 거다. - 13강 정리표 확인해서 외워야 된다고 말하기. - 본질을 확인! - inline은 본질이 글자처럼 취급 된다. --- - div 안에 123을 주고 질문 -> div 안에 있는 글자는 몇 개인가? 정답 : 3개 - 123을 지우고 div>a{네이버로 이동} -> 이렇게 되어 있을 때 div 안에 글자는 몇 개인가? -> 정답 : 1개 - 네이버로 이동(7) -> 이 글은 누구거인가? a건가? div건가? 정답 : a엘리먼트 - '네이버로 이동'은 div 텍스트가 아니다. - div 안에 aaa 작성 후 -> aaa가 텍스트인가? a가 텍스트인가? -> aaa가 텍스트이고 a엘리먼트라고 한다. - a의 기본 display 값은 무엇인가? 정답 : inline - a의 기본 display 값이 block이면 텍스트가 가로로 나오는 것이 아닌 세로로 한 줄씩 나오게 된다. - inline의 본질은 무엇인가? 정답 : 글자화 --- - 그러면 이 a는 부모에게 몇 개의 글자로 취급 되는가? 정답 : 1개의 글자로 취급 - div가 갖고 있는 텍스트의 개수는 한 개이다. --- - div { text-algih:center; } -> 텍스트가 가운데로 이동한 걸 확인. - 그렇다면 지금 몇 개의 글자가 가운데로 이동한건가? 정답 : 1개 - 그림판 열어서 설명하기 --- - '네이버로 이동' 이 텍스트가 가운데로 이동한 것이 아니라 - 이 텍스트를 감싸고 있는 a가 가운데로 이동한 거로 봐야 한다. - div는 자기가 가지고 있는 텍스트를 가운데로 정렬한 겁니다. - 근데 그게 몇개인가요? 정답 : 한 개(a) -> 한 개가 가운데로 이동한 거다. --- - section 안에는 자식 엘리먼트가 몇 개가 잇는가? -> 정답 : 3개 - a의 display가 뭔가? 정답 : inline - article은 display 기본 값이 block이다. --- - seciton에다가 css를 뭐라고 했어요? - 니가 가지고 있는 텍스트만 정렬해라. - section 안에는 몇 개의 엘리먼트가 들어있죠? 정답 : 3개 - 그 중에서 텍트스만 정렬해 달라. - a 두 개는 정렬 된 반면에 article은 정렬이 안되었다 그 이유가 무엇인가? - article은 텍스트가 아니기 때문에. ## 27강, inline 요소에 text-align 속성을 주면 의미 없는 이유 - [설명용](https://codepen.io/sangwon7242/pen/XWVKEYM?editors=1100) - 그림판 열어서 설명 --- - 예를 들어 이러한 공간이 있다고 가정해 봅시다 - 여기에 가운에 이러한 녀석 있어요. - 왼쪽으로 붙으라 하면 왼쪽으로 붙고, 오른쪽으로 붙으라 하면 오른쪽으로 붙을 수 있습니다. - 그런데 이러한 작은 공간의 벽이 주어졌다고 가정해 봅시다. - 거기에 어깨가 정말 넓은 사람이 이렇게 주어졌다고 했을 때 - 왼쪽 정렬, 오른쪽 정렬을 부여한다 어깨 넓은 사람이 왼쪽, 오른쪽으로 이동이 가능할까요? --- - 코드팬을 돌아와서 - div, section이 display 기본 값이 뭐죠? 1초만에 대답이 나와야 합니다. - 어쨌든 display 기본 값은 inline 아니면 block이죠? - div, section이 display 기본 값이 뭐죠? -> block - 얘가 block 인지 어떻게 알았어요? -> 넓이가 최대로 늘어났기 때문에 - 그렇다면 section을 정렬시킬 여지가 있나요 없나요? --- - 그림판으로 돌아와서 - 좁은 공간 안에 어깨 큰 사람에 대한 비유 다시 설명 - 왼쪽으로, 오른쪽으로 이동할 수 없다. - 근데 얘가 만약에 어깨가 이렇게 좁아졌어요? - 그러면 정렬이 되는가? 안 되는가? - 정렬이 된다. --- - 코드팬을 돌아와서 - 파란색 박스는 1차 대전제부터 틀렸다. - 그래서 section에다가 width 값을 50px을 줘본다. - 이렇게 하게 되면 파란색 박스가 정렬 될 여지가 있어요 없어요? 정답 : 있다. - 그런데 가운데로 정렬하지 않는 이유는 뭘까요? --- - 저는 div에 뭘 정렬하라고 했죠? 정답 : text - 근데 정렬이 안된 걸 보아 section은 텍스트가 아니다. - 보통 뭘 보고 text 라고 하죠? 정답 : inline 요소인 경우에만 - 그런데 section 은 display가 뭐죠? 정답 : block - 그러면 얘를 뭘로 바꿔야 해요? display를? -> inline-block 으로 바꾸면 됩니다. --- - 여기까지 됐고, 그 다음에 또 보세요. 여러분 들이 또 자주하는 실수. - div에다가 제가 inline-block을 주게 되면 가운데로 정렬이 될까요? 맞춰보세요. - 결과적으로 파란색 박스가 가운데로 갈 수 있을까요? 정답 : 없다. - div에 display:inline-block 주게 되면 어떤 변화가 있을지 예상이 가시나요? - inline-block 를 주게 되면 얼마큼 줄어들죠? 최소한으로 줄어들죠? --- - 정말 제일 쓸데 없는게 display가 inline-block인 엘리먼트한테 text-aligh:center를 주는거에요. - 왜 쓸모 없죠? inline-block은 너비가 최소한으로 줄어들죠? - 그러기 때문에 그 자식한테 정렬 될 여지라는 공간을 빼앗는거잖아요? - 이 상태로 정렬해봤자 의미가 없어요. - 그런데 지금 이 상태를 보면 정렬이 된거에요? 아니에요? -> 정렬이 된겁니다. --- - div에 text-aligh:center 줬기 때문에 나름대로 가운데로 정렬이 된겁니다. 티가 안나서 그런거지 - 아무튼 초보자가 하는 실수. 이 두가지를 같이 쓰게 된다. - display:inline-block --> 이건 너비를 확 줄어들게 하는거죠? - text-aligh:center -> 이런 경우 이건 큰 의미가 없다. --- - 코드펜으로 돌아와서 div에 있는 센터, 인라인 블럭 지우기 - 여기서 여러분이 가운데로 보내고 싶은건 누구에요? 정답 : section - 그렇다면 '안녕' 이라는 텍스트를 가운데로 정렬하고 싶으면 누구한테 text-aligh을 줘야해요? - '안녕'을 빨간 박스 가운데로 보내고 싶으면 누구한테 text-aligh 파란색한테 줘야 하나? 빨간색한테 줘야 하나? - 정답: div한테 줘야 한다. - section에게 text-aligh:center를 주게 되면 이 안에 있는 텍스트가 가운데로 정렬 된다. - seciton에 width값을 빼볼게요. --- - 그럼 이렇게 생각한단 말이에요. 나는 section 한테 text-aligh:center 줬는데 가운데로 안가네? - text-aligh은 seciont을 정렬하는게 아니라 이 안에 있는 텍스트를 정렬한다. - 자 그러면 우리가 section을 가운데로 정렬하고 싶으면 누구한테 text-aligh을 줘야 하죠? - 정답 : div --- - div한테 text-aligh:center 주기. --- - 27강, 28강 과제 내주기 ## 28강, 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 만들어주세요 - 과제 후에 강의 시작 - [설명용](https://codepen.io/sangwon7242/pen/NWXrMqG) ## 29강, hover - hover에 대해서 한번 배워보겠습니다. - css 스타일 리스트가몇 명인가요? 두 명 - 배우는 몇명인가요? 한 명 - 그러면 배우는 몇 명의 스타일 리스트를 찾아가는가? 정답 : 두명 --- - 첫번 째 div 속성이 이렇게 있다고 설명 - 두번 째 찾아온 스타일 리스트가 다른 속성을 갖고 있으면 상관 없는데, - 첫 번째가 갖고 있는 백그라운드 컬러와 대립 되는 컬러 블루를 갖고 있어요. - 그렇다면 div는 지금 첫 번째, 두 번째 누구 손을 들어준건가? 정답 : 두 번째 --- - 제가 만약 두 번째 dive에 이름을 잘 못쓰게 되면 어떻게 될까요? - 당연히 작동하지 않고 첫 번째 배경색이 작동 되는 걸 확인할 수 있다. --- - css, dive -> 얘는 지금 놀고 있나 일하고 있나? 놀고 있다. - div로 바꿔주면 -> 지금 얘는 일을 하고 있는가? 한다. --- - 메모장 열고 - 예를 들어 사과, 상자안의 사과 이 두개르 검색 한다 했을 때 어떤게 검색 결과가 더 많이 나오는가? - 사과 - 그러면 어떤 검색어가 조건이 까다로운거죠? - 검색어가 길수록 검색 조건은 좁아지는 겁니다. --- - css. div에는 옵션이란 걸 달 수 있다. - 옵션이 뭐냐면 div:상자안의 -> 이게 무슨뜻인가? - div이긴 div인데 상자안의 div라는 뜻이다. - 그런데 이렇게 막 쓸 순 없고 :hover 라는 옵션이 있다. hover가 뭐냐면 마우스를 올리게 되면이라는 뜻 - 그냥 div와 div:hover 한 것과 어떤게 더 검색 조건이 까다로운가? - 당연히 div:hover 이다. --- - 질문 : div이긴 div인데 지금 마우스가 올려져 있는 녀석이 있는가? -> 그런녀석은 없다. - 그냥 div는 있는 반면 마우스가 올려진 div는 없다. 그렇기 때문에 div는 일하고 있지만 밑에는 일 안하고 있다. - 아무것도 안한 상태에서 마우스를 빨간 박스에다 갖다 대게 되면 박스 색이 바뀌는 걸 확인 가능 - 왜 그런거죠? 지금 누가 일하고 있는거죠? 두번째 css가 일하고 있는거다. - 다시 마우스를 빼면 일을 안한다 -> div:hover에 해당 되는 녀석이 없기 때문에 - 마우스를 올리면 일한다 -> 이게 hover이다. ## 30강, 100칸 짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 바뀌도록 해주세요 - 이건 과제 내주고 이후 같이 풀어보기 ## 31강, 자식선택자, 인접동생선택자 - 자식선택자, 인접동생선택자 복습입니다. - [설명용](https://codepen.io/sangwon7242/pen/yLpJjdj?editors=1000) ## 32강, - [설명용](https://codepen.io/sangwon7242/pen/YzYWvWq) ## 33강, text-deocration - 시작 코드펜 들어가기 - 여러분들이 기본적으로 a를 쓰게 되면 - 텍스트가 색상이 바뀌고 언더라인이 바뀌게 된다. - color은 여러분이 바꿀 수 있지만 이 밑줄 어떻게 빼죠? - text-decoration:underline -> none으로 변경 - text-decoration a의 기본값은 언더라인인데 없애고 싶으면 none을 부여한다. ## 34강, div 태그만 사용하여 사과의 색상을 red로 변경해주세요 - 과제 주고 이후에 같이 풀기. - a로 감싸본다 -> div로 감쌀 경우 어떻게 되는가? -> display:block때문에 밑으로 내려온다. - a로 다 감싼 뒤 -> 문제 다시 파악 div만을 이용 - div로 감싼 뒤 display:inline-block 부여 하기 ## 35강, bmx 사이트 상단바를 구현해주세요, 사용 - 과제 내주기 - [설명용](https://codepen.io/sangwon7242/pen/oNpLyZj?editors=1100) # 03-23 수업 내용 - 21일에 배운 내용 복습 35강 bmx 사이트 상단바 구현해 보기 ## 36강, bmx 사이트 상단바를 구현해주세요, 금지 - BMX 로고에 마우스를 올렸을 때 마우스 클릭 버튼이 안뜨면 딱히 a를 안쓴 거다. - [강의설명](https://codepen.io/sangwon7242/pen/LYebRgg?editors=1100) ## 37강, bmx 사이트 상단바를 구현해주세요, 아이템 너비 균일 - 결과 미리보기 봤을 때 로고나 메뉴바에 마우스 올렸을 때 딱히 뭐 없으면 아직까지 a를 안쓴겁니다. - [강의설명](https://codepen.io/sangwon7242/pen/gOoLwNb) ## 38강, bmx 사이트 상단바를 구현해주세요, a 태그 적용 - 자 이번엔 보니깐 마우스 올리니깐 마우스 커서같은데 나타나죠? - [강의설명](https://codepen.io/sangwon7242/pen/dyJOOyL) ## 39강, bmx 사이트 상단바를 구현해주세요, a 엘리먼트의 너비 최대화 - 자 이번에 보시면은 마우스 올렸을 때 색깔도 바뀌어야 하고, 마우스 올렸을 때 언더라인도 들어가야 하고, - 그리고 BRAND 양 옆 공백에 마우스를 올리면 클릭이 안됐었죠? 요것도 클릭이 되게 만들어야 합니다. - 요거를 하기 위해서 저는 그냥 38강 정답에서 부터 시작할게요. - [강의설명](https://codepen.io/sangwon7242/pen/ZEvBBBo?editors=1100) ## 40강, 메뉴 구조를 emmet 으로 생성 - [강의설명](https://codepen.io/sangwon7242/pen/MWrbJWL?editors=1000) ## 41강, 이미지 태그 - 이번 시간에는 img라는걸 한번 알아볼 겁니다. -> 구글 홈페이지 들어가기 - 그냥 구글을 들어간거랑 새탭으로 들어간거랑 다른겁니다. -> google.com 들어가서 - 로고 우클릭 해서 - 이미지 주소복사 클릭 - 모든 이미지가 이런식으로 주소를 복사할 수 있는건 아니지만 구글은 가능합니다. - 복사를 한 다음에 ctrl + t 를 누르신 다음에(새탭열기) - 새탭 여신 다음에 여기에 ctrl + v 하셔서 붙여넣기 하시면 이미 클립보드에 복사된걸 붙여넣기 하시면 - 이렇게 나옵니다. --- - 메모장 켜서 - 이걸 뭐라하냐면 url 이라고 하는건데, 이게 어떤 서버에 올라가져 있는 겁니다. - 이것만 알면 우리가 쓸 수 있습니다. - 코드펜 들어가기 --- - 얘도 br과 같이 딱 하나만 쓸 수 있는 녀석입니다. - img/ tap 하시면 - src , source라고 하는 속성에 커서가 되어 있을텐데 여기다가 우리가 방금 복사한 이미지 주소를 복사 붙여 넣기 하시면 됩니다. - alt라는 속성은 뭐냐면 src가 오류가 나서 이미지가 안나온다거나 시각 장애인들이 이미지를 직접 볼 수 없으니깐 - 사용자에게 이미지 대신 제공할 대체 정보를 제공하는 속성이라 보시면 됩니다. - src="url" alt="구글로고" -> 이런식으로 작성할 수 있다. ## 42강, picsum.photos 로 쉽게 테스트용 이미지 사용하기 - 우리가 인터넷에 올라와 있는 걸로 img를 실습하면 되는데 이미 누가 많이 올려놨습니다. - 구글에다가 lorem img 라고 치시면 맨 상단에 사이트 하나가 나옵니다. - picsum.photos 라고 나오는데, 여기서 img를 가져오는 방법에 대해 알려드릴게요. - img url 복사해서 코드펜에 url 붙여넣기 --- - https://picsum.photos/id/237/200/300 - 이게 어떤 의미냐면 237번째 img인데 가로가 200이고 높이가 300인 img이다. 그런 의미입니다. - 그런데 오해하지 마세요. 모든 이미지에 200/300 이걸 바꾼다해서 이미지의 크기가 바뀌는건 아니에요. - [강의설명](https://codepen.io/sangwon7242/pen/xxpRgRw?editors=1100) ## 43강, img 엘리먼트의 object-fit 스타일 속성 - 코드펜 열고 - 저는 42강을 열고 아무 이미지나 가져오겠습니다. 45번 300/200 이미지 가져오기 - [강의설명](https://codepen.io/sangwon7242/pen/oNpYBGB) ## 44강, 이미지를 3x2 형태로 배열, nbsp와 br 사용 - [강의설명](https://codepen.io/sangwon7242/pen/abEBprp?editors=1100) ## 45강, 이미지를 3x2 형태로 배열, br 사용 금지 - [강의설명](https://codepen.io/sangwon7242/pen/yLpVMyY) - 이번 에는 br을 쓰지 말라고 하네요? - 그러면 br 지우고 대신에 div 를 쓸 수 있는데, div가 뭐에요? - 얘가 display: block 이잖아요. 그래서 얘가 한줄 다쓰죠? - 그러면 자연스럽게 어떻게 되요? 위 아래가 나뉘어지겠죠? ## 46강, 이미지를 3x2 형태로 배열, nbsp 사용 금지 - [강의설명](https://codepen.io/sangwon7242/pen/JjMbWdy?editors=1100) # 3월 28일 수업 내용 - 지난 시간에 배운 내용 간단하게 복습 ## 47강, padding 과 margin - [강의설명](https://codepen.io/sangwon7242/pen/QWapeeL?editors=0100) ## 48강, 이미지를 3x2 형태로 배열, padding을 사용 - 이거 하실려면 저랑 HTML 구조를 똑같이 맞추는게 좋습니다. - img 태그 다 잘라내기 - 자 일단 우리가 nbsp랑 br을 못쓰잖아요? - 잘라낸거 복사 - [강의설명](https://codepen.io/sangwon7242/pen/yLpbBBY?editors=1100) ## 49강, 이미지를 3x2 형태로 배열, margin을 사용 - 이건 쉬우니깐 한번 만들면서 해볼게요. -> 48강 강의자료 포크 - [강의설명](https://codepen.io/sangwon7242/pen/rNpmwWK?editors=1100) ## 50강, nth-child, nth-last-child, first-child, last-child - 정답부터 확인 - section 안에 div가 몇개죠? 정답 : 20개 - [강의설명](https://codepen.io/sangwon7242/pen/rNpmwjr) - [문제풀이](https://codepen.io/sangwon7242/pen/qBpmjoe) ## 51강, 무지개를 만들어주세요 - 시작 들어가서 포크 - [강의설명](https://codepen.io/sangwon7242/pen/ExomXeJ) ## 52강, 무지개를 만들어주세요, hover 시 색상 좌우반전 - 그 다음에 문제, 여기에 마우스를 대면 어떻게 되요? - 이 색깔이 반전 되어야 겠죠? - [강의설명](https://codepen.io/sangwon7242/pen/XWVRgLw) ## 53강, block 요소의 가로정렬 - [강의설명 1](https://codepen.io/sangwon7242/pen/vYpmJWJ) - [강의설명 2](https://codepen.io/sangwon7242/pen/GRymvGx?editors=1100) - 그림판 열고 - 여러분이 만약에 이러한 벽 사이에 있다고 해볼게요(양 쪽에 선 하나씩) - 다음에 여러분이 팔을 최대한 벌리면은 요만큼이라고 해보겠습니다(가운데 직선) - 그런데 만약에 여러분이 신비한 능력을 얻어서 팔이 굉장히 잘 늘어난다고 하면은 - 팔이 여기서부터 여기까지 늘어날 수 있을거에요. - 이 상태에서 왼쪽에 이만큼의 여백을 주래요. 그러면 이렇게 줄이면 되고요. - 여백을 없애래요. 그러면 이렇게 없애면 되겠죠. - 그런데 만약에 여러분이 가진 그 능력이 사라져서 팔의 길이가 딱 고정되어 있습니다. - 그러면 팔의 길이가 고정된 상태에서 왼쪽에서 얼마큼 떨어지래요? 100만큼 떨어지래요 - 그런데 오른쪽에서 얼마큼 떨어지래요? 0만큼 떨어지래요. - 그런데 그게 가능할까요? - 0이어서 붙어야 하는데 그게 안되는 이유는 뭐다? - 물리적으로 불가능하기 때문입니다. - 코드펜 - 얘가 너비가 뭐에요? 300px로 고정되어 있잖아요. - 코드펜 ## 54강, 모든 보이는 엘리먼트의 조상은 body이고, 그의 부모는 html 이다 - 요런거를 한번 만들어 볼게요. - [강의설명](https://codepen.io/sangwon7242/pen/MWrmEpj) - 과제 ## 55강, BMX 메인 레이아웃, 이미지 4개를 배열해주세요, 조건없음 - [강의설명](https://codepen.io/sangwon7242/pen/jOYmGKr?editors=1100) ## 56강, BMX 메인 레이아웃, 이미지 4개를 배열해주세요, 엘리먼트 6개 - 자 이제 조건이 까다로워졌습니다. - [강의설명](https://codepen.io/sangwon7242/pen/qBpmPyK?editors=1100) ## 57강, BMX 메인 레이아웃, 이미지 4개를 배열해주세요, 엘리먼트 5개 - 자 이제 엘리먼트 점점 극한으로 치닫습니다. - [강의설명](https://codepen.io/sangwon7242/pen/GRymMzV) ## 58강, BMX 메인 레이아웃, 이미지 4개를 배열해주세요, 엘리먼트 4개 - [강의설명](https://codepen.io/sangwon7242/pen/vYpmWOo) ## 59강, id와 class # 3월 30일 수업 내용 - 59강 복습 - 콤피네이션이 가능 - div#a.a.b.hover -> div인데 id가 a이고 동시에 a 클래스와 동시에 b라는 클래스를 갖고 있고 동시에 마우스까지 올려진 - div#a.a.b.hover:nth-child(2) -> 마우스 올려진게 하필이면 누군가의 두번 째 자식이다. - div#a.a.b.hover:nth-child(2) a -> 이건 뭐냐면 그런 녀석을 선택하는게 아니라 그런 녀석에 후손인 a인 얘를 선택하겠다. - div#a.a.b.hover:nth-child(2) a > div -> 후손 선택자도 배웠고 자식 선택자도 배웠잖아요? - div#a.a.b.hover:nth-child(2) a > div + nav -> 인접(형제) 선택자도 배웠죠? ## 60강, 선택자 연습 튜토리얼, CSS DINER 소개, 단계 10까지, 문제 ## 61강, CSS DINER, 단계 11 ~ 19 ## 62강, border-radius - [강의설명](https://codepen.io/sangwon7242/pen/popwKKj?editors=1100) ## 63강, 슬라이더의 페이지 버튼박스를 구현, 문제 - [강의설명](https://codepen.io/sangwon7242/pen/GRyEBga?editors=1100) ## 64강, cursor 개념, mdn, w3schools 소개 - 63강 강의설명 보고 - 여기에다가 마우스를 올렸을 때 손가락 모양으로 바뀌어야 하는데, - 지금 이 상태면 고객이 마우스를 갔다 댔을 때 어떤걸 클릭하는 버튼인지 헷갈릴 수 있단말이에요. - 코드펜으로 돌아가서 --- - mdn 사이트 - cursor - not-allowed 써보기(클릭하면 안된다) - grap 써보기 - 사이트 밑에 보면 자세히 나와있습니다. - 보통 뭘 많이 쓸까요? pointer를 제일 많이 씁니다. - 다른 사이트도 소개 ## 65강, inherit - [강의설명](https://codepen.io/sangwon7242/pen/zYpdOyw?editors=1100) ## 66강, 기본값이 inherit 인 css 속성 찾기, 문제(정답) - 자 이제 중요한거에요. 여러분 한번 실험을 해보세요. - 우리가 어태까지 배운게 뭐가있죠? - 메모장 켜서 - font-size, font-weight, letter-spacing, color, background-color, width, height, - margin, padding, display, border, border-radius, cursor, text-aligh, text-decoration - 자 이제 여러분이 이거를 하시면 됩니다. - font-size : inherit(기본값) / font-weight : inherit(기본값) / letter-spacing : inherit(기본값) / color : inherit(기본값) - background-color -> 얘는 기본값이 inherit인지 모르잖아요? - 이거를 실험을 통해 여러분이 알아보시면 됩니다. - 어떻게 알아보냐면 여러분이 코드펜 열어서 직접 다 해보셔야 합니다? - 그냥 알아보는 것보다 알아내는 행위 자체를 지금 훈련을 해보려는거에요. --- - 여러분이 가정을 해야 합니다. -> 코드펜으로 - [설명](https://codepen.io/sangwon7242/pen/RwxZwbE?editors=1100) --- - 정답 - font-size : inherit(기본값) / font-weight : inherit(기본값) / letter-spacing : inherit(기본값) / color : inherit(기본값) / width : auto, height: auto, - margin : 0 / padding : 0 / display : block / border : none / border-radius : 0 / cursor : auto / text-aligh : inherit / text-decoration : inherit ## 67강, a 엘리먼트 노말라이즈 - [강의설명](https://codepen.io/sangwon7242/pen/ZEvJELJ?editors=1100) ## 68강, 중앙 모서리 둥근 메뉴를 구현해주세요. - 정답예시를 우측에 놓고, 코드펜 좌측에 두고 --- - 여기서 엘리먼트를 4단구조로 보신 분들은 잘 보신겁니다. - 그림판 열고 - [사각형] 뭔가 가운데 정렬이 되어 있다. - 근데 얘가 너비가 어떻게 되어있어요? 줄어있죠? - 그럼 뭘 알 수 있어요? [사각형] 얘는 inline-block일 것이다. - 그러면 얘를 가운데 정렬하려면 부모가 필요하죠? - ---------------------- - [ ] - ---------------------- - 그리고 이 안에는 또 이렇게 4개[사각형 4개]가 있어여 한다. - 그 안에 텍스트가 뭐에요? 그냥 텍스트가 아니라 - 클릭하면 이동하는거니깐 - 이 안에 있는 텍스트를 그냥 쓰지 말고 a로 감싸자 - 요 구조가 딱 떠올랐구요. 그대로 한번 만들어 보겠습니다. - [강의설명](https://codepen.io/sangwon7242/pen/rNpzOKd?editors=1100) ## 69강, body 노말라이즈 - [강의설명](https://codepen.io/sangwon7242/pen/XWVaXXo) # 4월 1일 수업 내용 ## 70강, class 선택자 복습 - [강의설명](https://codepen.io/sangwon7242/pen/dyJzGNo?editors=1100) ## 71강, 모든 태그를 div로 변경해주세요. 클래스 사용가능 - [강의설명](https://codepen.io/sangwon7242/pen/yLpoeXx?editors=1100) ## 72강, 최상위 엘리먼트의 클래스 속성을 제외한 나머지는 전부 지워주세요 - [강의설명](https://codepen.io/sangwon7242/pen/yLpoeEG?editors=1100) ## 73강, ul, li - 72강 보고 - 이거 보면 태그가 너무 정신없지 않나요? - 이게 다 div라 이게 무슨역할이고, 이게 무슨역할인지 구분이 안갑니다. - 그렇다고 여기에 다 클래스를 붙이기에는 조금 귀찮죠? - 해결 방법이 다 있습니다. - 우리가 배운 태그가 뭐뭐 있죠? - a, img => inline - br - nav, section, article, div => block - div 태그로만 사이트를 만들 수는 있지만 나중에 코드가 많아지면 유지보수가 굉장히 힘듭니다. - 상황에 맞는 태그를 쓰는게 좋습니다. - 그래서 우리가 배울게 ul, li 입니다. 그 전에 ul, li의 위상이 알려드리기 위해 네이버 들어가볼게요. - ctrl + u -> 찾기 a -> a개수 파악 - 찾기 div > div 개수 파악 / section, article, nav - 찾기 ul, li -> ul, li 개수 파악 -> 굉장히 많이 쓰인다는 뜻입니다. - 코드펜으로 - [강의설명](https://codepen.io/sangwon7242/pen/BaJwmOa) ## 74강, ol, li - 자 많이 안쓰이지만, ol, li도 있습니다. - [강의설명](https://codepen.io/sangwon7242/pen/GRyMOzV) ## 75강, h1 - [강의설명](https://codepen.io/sangwon7242/pen/KKZXyLW?editors=1100) ## 76강, 방탄소년단의 노래소개와 멤버구성을 ul, ol, li , h1, h2 태그로만 표현 - 과제 내주기 - [강의 설명](https://codepen.io/sangwon7242/pen/vYpeWoq?editors=1000) ## 77강, ul, li 노말라이즈 - 지금까지 배운 노말라이즈 정리 - body {margin : 0 } - a {color: bloack} X -> a {color: inherit textdecoration: none} - [강의설명](https://codepen.io/sangwon7242/pen/VwyMxZN) ## 78강, h1 노말라이즈 - [강의설명](https://codepen.io/sangwon7242/pen/eYyGrYy) ## 79강, 상황에 맞는 태그를 알면 그걸 사용하고, 모르면 div - [강의설명](https://codepen.io/sangwon7242/pen/OJzxZVy) ## 80강, CSS DINER, 단계 20 ~ 26, to2.kr/dnI - 0부터 26까지 풀어야 합니다. - 다 하시면 0~26까지 5분 안에 풀어주셔야 합니다. ## 81강, 중앙 둥근모서리 메뉴 구현 튜토리얼 - [강의설명](https://codepen.io/sangwon7242/pen/jOYGxBL?editors=1100) # 04-04 수업 내용 ## 82강, 3가지 메뉴를 구현해주세요 - [강의설명](https://codepen.io/sangwon7242/pen/MWrEGvV) ## 83강, a에 마우스를 올리면 인접동생인 div가 나타남 - 선 과제 - 정답예시 보고 이후 설명 - [강의설명](https://codepen.io/sangwon7242/pen/yLppOqG) ## 84강, display 정리 - none -> 있지도 않은겁니다. 아예 없다. 안보이는 수준이 아니다. - inline : 글자화, 너비최소축소, 가로배열 - inline : 너비, 높이, margin, padding 이 안 먹는다. / a, 글자(일반글자), span - inline-block : img - block : 블록화, 너비최대확대, 무조건세로배열 / div, section, article, nav - flex - 나중에 배울 내용. - block 랑 비슷한 녀석이라고 보시면 됩니다. - 디스코드에 남기기 ## 85강, inline-block 으로 그리드 만들기 1부, 2부 - 정답 예시 확인 --- - 1부 설명 - [강의설명 1](https://codepen.io/sangwon7242/pen/zYppBJN?editors=1100) - [강의설명 2](https://codepen.io/sangwon7242/pen/xxppOWd?editors=1000) --- - 2부 설명 - [강의설명](https://codepen.io/sangwon7242/pen/QWaaEXb?editors=1100) ## 86강, inline-grid 클래스 - 정답예시 확인 - [강의설명](https://codepen.io/sangwon7242/pen/YzYYGrM?editors=1100) ## 87강, inline-grid 클래스 활용 - 과제 내주기 - [강의설명](https://codepen.io/sangwon7242/pen/yLppawp?editors=1100) ## 88강, 화면의 높이대비 비율로 엘리먼트 높이 조절, 중첩퍼센트, 1부, 2부 - 과제 내주기 - 이렇게 빨간색으로 채우시면 되는거예요. - [강의설명 1](https://codepen.io/sangwon7242/pen/vYppyNN?editors=1100) - 2부. 이건 다같이 해볼게요. - [강의설명 2](https://codepen.io/pen?editors=1100) ## 89강, 화면의 높이대비 비율로 엘리먼트 높이 조절, 중첩퍼센트, 전체 화면 높이의 반 - 과제 내주기 - [강의설명](https://codepen.io/sangwon7242/pen/oNppYdb?editors=1100) ## 90강, 화면의 높이대비 비율로 엘리먼트 높이 조절, vh, 전체 화면 높이의 반 - [강의설명](https://codepen.io/sangwon7242/pen/mdppOGm) # 04-06 수업 내용 ## 91강, 그리드로 계단식 비율 예제 - 과제 내주기 - 처음부터 만들어보기 - [강의설명](https://codepen.io/sangwon7242/pen/qBppqwZ?editors=1100) ## 92강, box-sizing: border-box - box-sizing이라고 하는 굉장히 중요한 걸 배워보겠습니다. - [강의설명](https://codepen.io/sangwon7242/pen/wvpyjxB?editors=1100) ## 93강, inline-grid 에 box-sizing 추가 - 제가 inline-grid 다시 한번 만들어볼게요. - [강의설명](https://codepen.io/sangwon7242/pen/mdpXLgZ?editors=1100) ## 94강, 컨테이너로 레이아웃을 중앙에 모으고 너비 고정시키기 - [강의설명](https://codepen.io/sangwon7242/pen/eYyVKBr?editors=1100) ## 95강 - 우리의 첫 번째 목표는 bTn 이걸 만드는게 우리의 목표입니다. - 우리가 안 배운 것들이 있습니다. 그래서 | -> 이걸 살짝 높일게요. - 우리가 border로 할 거기 때문에 얘를가 딱 맞아야 합니다. - 위 첫번 째 이미지, 왼쪽부터 1, 2, 3 이미지까지만 만들겠습니다. - 웹 폰트 같은 건 안쓸게요. --- - 코드펜으로 - 1단계 뭘 해야 할까요? - 뭘 하던 간에 노말라이즈 부터 해야 합니다. --- - [bmx 사이트 상단부분 구현, to2.kr/bTn, 작업 1, 노말라이즈](https://codepen.io/sangwon7242/pen/eYyVjqJ) - [bmx 사이트 상단부분 구현, to2.kr/bTn, 작업 2, 컨테이너 구현](https://codepen.io/sangwon7242/pen/abEqaop) - [bmx 사이트 상단부분 구현, to2.kr/bTn, 작업 3, 로고바 구현](https://codepen.io/sangwon7242/pen/RwxQYaB?editors=1100) - 여기까지 해보라고 하기 --- - [bmx 사이트 상단부분 구현, to2.kr/bTn, 작업 4, 메뉴바 구현, 마크업](https://codepen.io/sangwon7242/pen/wvpyEJL?editors=1100) - [bmx 사이트 상단부분 구현, to2.kr/bTn, 작업 5, 메뉴바 구현, 기본 CSS 작업](https://codepen.io/sangwon7242/pen/MWrQqOb?editors=1100) - 여기까지 해보라고 하기 --- - [bmx 사이트 상단부분 구현, to2.kr/bTn, 작업 6, 메뉴바 구현, 아이템 좌우 보더, 바에 상단여백](https://codepen.io/sangwon7242/pen/popaOKE?editors=1100) - 여기까지 해보라고 하기 --- - [bmx 사이트 상단부분 구현, to2.kr/bTn, 작업 7, 탑 이미지 바 구현](https://codepen.io/sangwon7242/pen/vYpdVeE?editors=1010) - 여기까지 해보라고 하기 --- - [bmx 사이트 상단부분 구현, to2.kr/bTn, 작업 8, 탑 2 이미지 바 구현](https://codepen.io/sangwon7242/pen/VwyQEdY?editors=1100) - [bmx 사이트 상단부분 구현, to2.kr/bTn, 작업 9, 마무리 작업](https://codepen.io/sangwon7242/pen/VwyQEdY?editors=1100) # 04-11 수업 내용 - 95강 연습 ## 96강, .img-box 클래스로 자식 이미지 주변에 여백제거 - [https://placekitten.com/](https://placekitten.com/) - [강의설명](https://codepen.io/sangwon7242/pen/OJzQaLj) ## 97강, 음수 margin 개요 - [강의설명](https://codepen.io/sangwon7242/pen/RwxJvME?editors=1100) ## 98강, 음수 margin으로 상자에서 벗어나기 - 정답 열고 -> 음수 마진으로 이런걸 한번 만들어 볼게요. - [강의설명](https://codepen.io/sangwon7242/pen/OJzEddJ?editors=1100) ## 99강, #### 그리드 여백, 전통적인 방법, 작업 1, 아이템의 너비를 고정px로 - 95강으로 가서 img를 가져오겠습니다. - [강의설명](https://codepen.io/sangwon7242/pen/LYeraNq?editors=0100) #### 그리드 여백, 전통적인 방법, 작업 2, 아이템의 너비를 퍼센트 빼기 픽셀로 - [강의설명](https://codepen.io/sangwon7242/pen/xxpzBdm?editors=0100) #### 그리드 여백, 전통적인 방법, 작업 3, 아이템의 너비 수식을 풀어서 한줄나열 개수를 쉽게확인 - [강의설명](https://codepen.io/sangwon7242/pen/gOoKEor?editors=0100) ## 100강, 그리드, 여백 음수마진 방법 - [강의설명](https://codepen.io/sangwon7242/pen/yLpEwjK?editors=1100) ## 101강, position 속성 정리 #### - positon 속성 정리 1부 - 속성표 보여주기 - absolute, fixed 얘네랑 relative, static 얘네랑 비슷해요. - absolute, fixed가 한 묶음 relative, static가 한 묶음 이라 보시면 됩니다. - absolute, fixed 이걸 한번 보여드릴게요. - [강의설명](https://codepen.io/sangwon7242/pen/PoEavoy) #### - positon 속성 정리 2부 - [강의설명](https://codepen.io/sangwon7242/pen/NWXzVdQ) ## 102강, absolute 요소 위치 옮기기 - 정답예시 보고 - 기존의 상식으로는 우리가 이걸 만들기가 불가능했죠. - 자 맞춰보세요. 여기에는 지금 레이어가 몇개가 있는걸까요? 5개 - 기본적인 레이어가 하나 있는 건데 거기서 별도의 레이어를 몇 개를 만든거에요? 4개 - 그리고 아시다시피 포토샵에서는 레이어와 레이어 사이를 어떻게 겹쳐도 상관없죠? - 그리고 레이어는 우열이 있습니다. 누가 더 위에 나올지 조절이 가능합니다. - 그리고 포토샵은 마우스로 레이어 위치를 가볍게 옮길 수 있겠죠? - (빨간네모) -> 그런데 얘는 왜 별도의 레이어로 안 쳤을까요? 얘는 지금 이렇게만 봐서는 모릅니다. - 이것들은 확실한 증거가 있잖아요 - 겹쳐 나온다는 건 사실 말이 안되는거죠? 물론 음수 마진을 사용하지 않았다는 가정하에 - 자 이렇게 한번 만들어볼게요. - 이제 여러분이 속성만 바꿔가지고 이렇게 만들면 됩니다. - 그런데 이전에 설명 드릴게 있어요. - 우선 제가 여기 section > div 이거 보이시나요? div 1,2,3,4 보이죠? - 제가 여기서 포지션을 지우면 어떻게 되요? static이랑 똑같이 됩니다. - 지웠더니 어떻게 되죠? 이렇게 됩니다. - 이게 뭘 의미하냐면은 원래 자식은 누구를 못 벗어나죠? 부모를 벗어날 수 없습니다. - 제가 section에다가 margint-top:500 줬는데 마진 탑을 0을 을 주면 부모만 올라오나요? 자식도 같이와요. 이게 원래 정상입니다. - 앱솔루트가 됐다? 이건(div) 별도의 레이어가 되는거에요. - 부모가 뭐건 간에 신경 쓰지 않아요. - 얘는 주변 녀석들과 상호작용 하지 않고 뭐에요? 공중에 떠서 날라다닙니다. - 한번 해볼게요. - section에다가 margin-top을 5000주면 부모는 내려가지만 자식들은 안 오죠? - 전혀 상관 없다는거 아셔야 합니다. - div들이 absolute가 되는 순간 section이 뭐던 간에 신경을 안씁니다. - 그 다음에 이렇게 만들어야 하죠? 한번 해볼게요. - 보면 파란색은 어떻게 되어 있어요? top이 0이죠? left도 0이죠? - [강의설명](https://codepen.io/sangwon7242/pen/WNdyBgQ?editors=0110) ## 103강, 104강 진행 # 04-13 수업 내용 - 103~105강 다시 풀어보세요. ## 105강, absolute, width, height, top, left 로 화면을 3 * 3 등분 - [강의설명](https://codepen.io/sangwon7242/pen/LYeJLVm?editors=1100) ## 106강, top, left, right, bottom의 개념과 기본값 - [강의설명](https://codepen.io/sangwon7242/pen/ExoeXVb?editors=1100) ## 107강, top, left, right, bottom으로 너비, 높이 조절 - 정답예시 확인 - 제가 이걸 이렇게 한번 만들어 볼게요. - 줄이면 이렇게 되는거 보이시죠? - 항상 여기(공백)가 고정되어 있는거 보이시나요? - 이거를 너비 높이 없이 한번 만들어볼게요. - [강의설명](https://codepen.io/sangwon7242/pen/YzYOQVB?editors=1100) ## 108강, absolute, top, left, right, bottom 으로 화면을 2 * 2 등분 - 정답예시 보고 - [강의설명](https://codepen.io/sangwon7242/pen/bGaxRap?editors=1100) ## 109강 - 정담예시 보고 - 일단 이렇게 만들겁니다. - 맨 처음에 이렇게 4등분을 먼저 해볼게요. #### 연습1, 수직수평중앙유령, 작업 1, 4등분 - [강의설명](https://codepen.io/sangwon7242/pen/GRyXEdR?editors=1100) #### 연습2, 수직수평중앙유령, 작업 2, relative로 가두기 - [강의설명](https://codepen.io/sangwon7242/pen/YzYOQvb?editors=1100) #### 연습3, 수직수평중앙유령, 작업 3, 수평중앙정렬 - 얘를 이렇게 가운데 정렬하는거를 한번 해볼게요 - 어디서부터 2단계서부터 - [강의설명](https://codepen.io/sangwon7242/pen/ExoeXdp?editors=1100) #### 연습4, 수직수평중앙유령, 작업 4, absolute - [강의설명](https://codepen.io/sangwon7242/pen/QWaVMyO?editors=1100) #### 연습5, 수직수평중앙유령, 작업 5, calc로 위치 미세조정 - [강의설명](https://codepen.io/sangwon7242/pen/MWrqvwG?editors=1100) #### 연습6, 수직수평중앙유령, 작업 6, transform으로 위치 미세조정 - [강의설명](https://codepen.io/sangwon7242/pen/eYyLEEb?editors=1100) ## 110강 #### 멀티메뉴제작을 위한 선택자 튜토리얼, 1부, 튜토리얼 진행하는 방법 - 자 굉장히 중요한겁니다. 우리가 이걸 해야 멀티 메뉴 마우스를 올렸을 때 밑으로 쫙 나타나고 그런것도 할 수 있어요. - 일단 1차 설명 드리면은 지금 메뉴가 4가지죠? - 이거를 합치는 거에요 -> 튜토리얼 2 이동 - ul은 a 밑에 또 둘 수가 있습니다. 요거를 li와 li사이에 두지 마세요. - 이런 식으로 무한히 넣을 수 있어요. -> 튜토리얼 3 이동 - 기존 css를 전부 지우고, 2차 메뉴를 숨겨주세요. - 기존 css가 뭐냐면 -> 튜토리얼 2 이동 - 2차 메뉴 아이템을 모두 숨겨주세요. - 여러분 여기서 중요합니다. - nav class="menu-1" -> 얘는 메뉴가 아니라 메뉴 박스에요. - 그리고 ul 얘가 뭐죠? 얘가 1차 메뉴입니다. - 그러면 요 li 3개는 1차 메뉴 아이템입니다. - 다시 한번 이건("menu-1) 메뉴 박스, 그리고 이건(ul) 1차 메뉴, 이건(li) 1차 메뉴 아이템 - a -> 그럼 얘는 뭐에요? 1차 메뉴 아이템의 텍스트입니다. - 얘가 1차 메뉴라면 ul(두번쨰 ul) -> 얘는 몇 차 메뉴에요? 2차메뉴 - 그럼 얘는 2차 메뉴 아이템, 얘는 2차 메뉴 아이템 텍스트 - 그러면 얘(세번째 ul)는 3차 메뉴. 지금은 없으니깐 지워도 상관 없습니다. - 여기서 뭐라고 해요? 2차 메뉴 아이템을 전부 숨겨달래요. -> 코드펜으로 - [강의설명_튜토리얼2](https://codepen.io/sangwon7242/pen/WNdgEVa?editors=1000) #### 멀티메뉴제작을 위한 선택자 튜토리얼, 2부, 정답 - 하나씩 설명 ## 111강, 중국집 메뉴로 알아보는 다층구조메뉴] - [강의설명](https://codepen.io/sangwon7242/pen/YzYOrYe?editors=1010) # 04-15 수업 내용 ## 112강, 선택자 검색대상의 개수 - [강의설명](https://codepen.io/sangwon7242/pen/LYegLKM) ## 113강, white-space:nowrap, 줄바꿈 금지 - [강의설명](https://codepen.io/sangwon7242/pen/bGamrrW?editors=1100) ## 114강, 넘치는 부분을 처리하는 overflow 속성 - [강의설명](https://codepen.io/sangwon7242/pen/mdpzMpP?editors=1100) ## 115강, text-overflow:ellipsis, 넘쳐서 숨겨지는 텍스트 ... 처리 - [강의설명](https://codepen.io/sangwon7242/pen/oNpaeag) ## 116강, 중앙 둥근 메뉴, 2차메뉴까지 구현 튜토리얼 - [강의설명](https://codepen.io/sangwon7242/pen/wvpYrmY?editors=1100) ## 117강, 중앙 둥근 메뉴, 3차메뉴까지 구현 튜토리얼 - [3차메뉴 마크업](https://codepen.io/sangwon7242/pen/abERQqV) - [3차메뉴 숨기기](https://codepen.io/sangwon7242/pen/ZEvqmoe) - [1차메뉴아이템 뿐 아니라, 모든메뉴아이템에 호버시 자식메뉴 나오도록](https://codepen.io/sangwon7242/pen/QWaZJVN?editors=1100) - [1차메뉴아이템 뿐 아니라, 모든메뉴아이템을 relative 처리하여, 모든 서브메뉴가 부모아이템이 갇히도록](https://codepen.io/sangwon7242/pen/vYpVQVb?editors=0100) - [3차메뉴는 2차메뉴아이템의 우측부분에서 나오도록](https://codepen.io/sangwon7242/pen/YzYJRoM?editors=1100) - [마지막 1차메뉴아이템에 속한 3차메뉴는 좌측에서 나오도록](https://codepen.io/sangwon7242/pen/bGamOpw?editors=1100) ## 118강, CSS DINER, 단계 27 ~ 32 ## 119강, flex 관련 공부자료 소개 # 04-18, 수업 내용 ## 120강, playground - [flex playground](https://cdpn.io/pen/debug/adLPwv) - container : 부모한테 주는 속성, 오직 부모한테만 준다. - items : 자식한테 주는 속성 - direction : 방향 - row : 왼쪽에서 오른쪽으로 - row-reverse : 오른쪽에서 왼쪽으로 - column : 위에서 아래로 - column-reverse : 아래서 위로 - flex-wrap - nowrap : 압축되어 있는 상태 / white-space: nowrap 은 넘친다. - wrap : 아래로 넘친다. -> inline-block처럼 만든다. - wrap-reverse : 위로 넘친다. - align-items : 한 줄 안에서의 정렬 - flex-start : 위로 - flex-end : 아래로 - center : 가운데 - baseline : 글자 끝에 맞춘다. - strectch : 기본 -> align-items 안주면 쫙 늘어남. - justify-content - space-around : 박스에 테두리를 부여한다. 그래서 맨왼쪽과 맨오른쪽은 작은 방면 여백 사이사이는 커보인다. - align-content : 줄 들을 정렬, 이건 여러 줄들을 정렬 - align-self : 자기 혼자 움직인다. - flex-grow : 성장성을 말한다. - 기본값 : 0 - 1이면 탄력이 낮은거다. -> 한쪽이 땅을 다 차지 -> 경쟁 상대가 없기 때문에 - 그런데 너비 차이가 1:2 이런 식이 아니다. - 너비 차이가 다르다. - 원래 얘네가 가지고 있는 너비에서 비어있는 공간을 차지한다. - 즉, 3분의 1을 얘가 가져가고, 3분의 2를 얘가 가져간다. - 1, 1, 1, 1, 1, 1 -> 이렇게 주면 각각 5분의 1씩 가져간다. - 그런데 10, 10... 이렇게 줘버리면 의미가 없다. - 그러면 얘네들한테 각각 1씩 준다고 해서 너비가 같냐? 그건 아닙니다. - 그런데 지금은 왜 똑같냐? 기본 너비가 똑같기 때문에 - 만약에 얘가 너비가 달랐다면 1, 1, 1... 줬을 때 얘가 너비가 조금 다르다. - flex-shrink : 수축성, 기본값 1 - 0이 뭐냐면 상황이 여의치 않을 때 압축되는 힘을 말한다. - 압축되는 능력이 없다. - 이러면 다른 얘들이 손해를 본다. - 수축성은 공간이 부족할 때 작동한다. - grow 성장성은 공간이 남아 돌때 작동을 한다. - flex : ```{ flex: flex-grow [flex-shrink] [flex-basis]; } ``` 이걸 한번에 쓸 수 있다. - 80 : 50 이렇게 하면 공간이 부족 - flex-shrink 1을 주면 어떻게 되는가? - 상황이 여의치 않아서 줄어든다. - 모든 공간적인 부족함을 누구한테 해결한다? 1 얘한테 해결한다. -> 이건 아무리 늘려도 소용없다. 경쟁상대가 없기 때문에, - flex-basis 각각 10% 주기 - flex-shrink 작동을 안한다. 이건 공간이 부족할 때 작동하기 때문에, - flex-grow에 1을 주면 어떻게 되는가? 나머지 공간을 1이 다 먹는다. 2한테 2 주면 이렇게 된다. - flex-basis 는 너비다 너비 - order : 기본적으로 0등 이다. - 엘리먼트 3에 1주면 얘가 맨 뒤로 이동한다. - 4에다 2주면 맨 뒤로 이동 - 1에다 3주면 얘가 꼴등으로 이동 - 기본적으로 다 0등이다. - 1한테 1만줘도 얘넨 꼴등이 된다. - 그럼 5에다가 -1 주면 어떻게 된다? 얘가 맨 앞으로 이동한다. - [강의설명](https://codepen.io/sangwon7242/pen/bGaOBER?editors=1100) ## 121강 #### flex를 이용해서 성배 레이아웃을 만들어주세요, 1부, 작업 0 부터 7 까지 #### flex를 이용해서 성배 레이아웃을 만들어주세요, 2부, 작업 8 부터 10 까지 - [강의설명](https://codepen.io/sangwon7242/pen/WNdLRPe?editors=1100) ## 122강, 영문 웹폰트 - [강의설명](https://codepen.io/sangwon7242/pen/mdpamEE) ## 123강, 적당한 웹폰트가 없다면 브라우저가 직접 흉내냅니다. - [강의설명](https://codepen.io/sangwon7242/pen/XWVogpX) ## 124강, 한글웹폰트는 무거우니 1개만 눈누에서 고르세요. - [강의설명](https://codepen.io/sangwon7242/pen/VwyqWoB) # 04-20, 수업 내용 ## 125강, 2개 이상의 웹폰트 사용법 - [강의설명](https://codepen.io/sangwon7242/pen/wvpNEdV) ## 126강, 하나의 문장안에서 영문자와 숫자만 다른 폰트로 적용하기 - [강의설명](https://codepen.io/sangwon7242/pen/gOoqdvJ?editors=1100) ## 127강, 엘리먼트를 스타일링 하는 2가지 방법 - [강의설명](https://codepen.io/sangwon7242/pen/dydqaGq) - 테일윈드 방식으로 진행 ## 128강, 테일윈드 소개 - [강의설명]() ## 129강 #### 카카오뱅크 상단바 구현, 1부, 작업 1 ~ 4 - [작업 1, 폰트적용, 노말라이즈](https://codepen.io/sangwon7242/pen/JjMxbNV) - [작업 2, 탑바 레이아웃](https://codepen.io/sangwon7242/pen/LYeqdpG?editors=1100) - [작업 3, 로고](https://codepen.io/sangwon7242/pen/KKZJozr?editors=1100) - [작업 4, 메뉴1](https://codepen.io/sangwon7242/pen/oNpmqaw?editors=1100) #### 카카오뱅크 상단바 구현, 2부, 작업 5 ~ 8 - [작업 5, 서류 제출하기 버튼](https://codepen.io/sangwon7242/pen/dyJaKxG?editors=0100) - [작업 6, 이미지 섹션 구현](https://codepen.io/sangwon7242/pen/LYeqBNN?editors=1100) - [작업 7, 이미지 섹션에 배경색 넣기](https://codepen.io/sangwon7242/pen/bGazjWj?editors=1100) - [작업 8, con-min-width 적용](https://codepen.io/sangwon7242/pen/jOYdpxJ?editors=0100) ## 130강, flex 자식, 즉 flex item이 되면 display속성값이 block 처럼 취급된다. - [강의설명]() # 04-25, 수업 내용 ## 131강, 미디어 쿼리 - [강의설명](https://codepen.io/sangwon7242/pen/zYpQWOj?editors=1100) ## 132강, CSS 변수 - [강의설명](https://codepen.io/sangwon7242/pen/jOYozaa) ## 133강, flex gap과 css 변수를 이용한, 반응형 그리드 - [강의설명](https://codepen.io/sangwon7242/pen/JjMqvPo) ## 134강, flex-grid 를 적용해서, CSS를 단순화 해주세요. - [강의설명](https://codepen.io/sangwon7242/pen/RwxmJBd?editors=1100) ## 135강, before, after - [강의설명](https://codepen.io/sangwon7242/pen/GRyaBgR) ## 136강, opacity, transition - [강의설명](https://codepen.io/sangwon7242/pen/oNpRMeK?editors=1100) ## 137강, transform, scale, z-index - [강의설명](https://codepen.io/sangwon7242/pen/YzedNXd) ## 138강, 폰트어썸 - [강의설명]() # 04-27, 수업 내용 ## 139강, box-shadow - [작업 1, box-shadow](https://codepen.io/sangwon7242/pen/RwxzXQp?editors=1100) - [작업 2, 그림자가 흐릿해짐](https://codepen.io/sangwon7242/pen/ZEvdgRZ) - [작업 3, 그림자는 2개 이상도 적용가능](https://codepen.io/sangwon7242/pen/NWXZQOB) - [작업 4, 그림자 transition](https://codepen.io/sangwon7242/pen/dyJBxaN) - [작업 5, 평소에도 그림자 약간](https://codepen.io/sangwon7242/pen/RwxzXvZ) ## 140강, text-shadow - [강의설명](https://codepen.io/sangwon7242/pen/gOoVOyr?editors=1100) ## 141강, 크롬 개발자 도구 사용법 - 네이버 들어가서 여기(전체언론사) 스타일을 보고 싶다. - 우클릭 - 검사 - ctrl + shift + c -> 원하는 거 클릭 - 또는 f12 눌러도 된다. - 이걸 누르시면 선택모드가 되는데, 이걸 누르고 클릭 하는 순간 해당 코드가 이렇게 나오고요. - 그 엘리먼트한테 들어간 스타일을 싹 다 볼 수 있습니다. - 보시면 맨 밑에서부터 힘이 없는 것들, 제가 말씀 드렸죠? 이 엘리먼트를 찾아오는 모든 스타일리스트는 나름대로 우선 순위가 있습니다. - 우선순위 약한 것부터 쭉쭉쭉 올라오는 겁니다. - 이런거 말고 내가 딱 정리 되어서 보고 싶다. 그러면 computed 눌러서 보시면 됩니다. - 정리되어 있는 것만 싹싹 보입니다. - 그 다음에 color가 이거라네요. 내역 보고싶다 하시면 이거 클릭 하시면 됩니다. - 그 다음에 놀랍게도 이런게 가능합니다. - 제가 네이버의 배경색을 바꿔볼게요. - 그 전에 여기서 방향키가 굉장히 중요합니다. 왼쪽키 누르면 위로 올라가고 한 번 더 누르면 이렇게 접습니다. 아무튼 이런 게 있습니다. - 저는 이 상태에서 올라가볼게요. 왼쪽 키를 누르면 계속 접혀서 어디로 올라갈까요? body - 저는 여기서 f2를 눌러볼게요. 그러면 이렇게 나와요. - 우클릭 하고 edit as HTML 눌러도 됩니다. - 들어가서 스페이스를 칩니다. 그리고 body style="background-color:red;" - 이 상태에서 ctrl+enter 누르면 이렇게 변경이 됩니다. 물론 f5누르면 다 날라갑니다. - 그리고 또 하나 이런 것도 할 수 있습니다. - 여기 computed 보시면 font-family가 이렇게 있는데 - 자세히 보고 싶으면 이걸 누르시면 됩니다. 이걸 누르면 실시간으로 폰트가 꺼져 있는 모습을 볼 수 있어요. - css 속성을 실시간으로 끌 수가 있어요. 꺼보고 넣어보고 - 그리고 이거 수정하는 거 될까요? 안 될까요? 당연히 됩니다. - 더블 클릭해서 100px 이렇게 바꾸면 이렇게 변경이 됩니다. - 마지막, 이건 엄청 좋은 스킬이에요. - ctrl + c 눌러서 이미지 클릭한 다음에 여기서 delete키 누르면 지울 수가 있습니다. 지워볼 수가 있어요. - 이 상태에서 여러분이 뭔가 문제를 찾을 수가 있어요. 문제를 빨리 찾고 수정이 가능합니다. ## 142강, BEM CSS 명명법 - [강의설명](https://codepen.io/sangwon7242/pen/zYpgxJO?editors=1100) ## 143강, 고정비율 엘리먼트 - [강의설명](https://codepen.io/sangwon7242/pen/zYpgGrr) - [설명용2](https://codepen.io/sangwon7242/pen/MWrNwjW) ## 144강, 배경이미지, 박스보다 이미지가 클 경우 - [강의설명](https://codepen.io/sangwon7242/pen/QWaebOe) ## 145강, 배경이미지, 박스보다 이미지가 작을 경우 - [강의설명](https://codepen.io/sangwon7242/pen/vYpoNXP) ## 146강, 스프라이트 이미지 - 이거를 알면 이런거를 할 수가 있습니다. - 네이버 로고 - 검사 - 그러면 이런게 나와요. 이게 뭐냐면 스프라이트 이미지라고 합니다. - 이게 뭐냐면 http통신을 하다보면은 이미지 하나 http통신 한번이거든요? - 그래서 외국에서 어떤 사이트를 들어갔을 때 이런 경험 해본 적 있을 실거예요 - 그림판 - 예를 들어서 로고는 떴는데, 어떤 버튼이미지는 안 떠 있고, 요건 떴는데 요건 안떠있고 - 네이버는 이런 어설픈 모습을 보여주기 싫어가지고 이미지를 뭐예요? 통째로 보낸 거예요. - 메모장 - 여러분이 그거 생각하시면 됩니다. 여러분이 미국에 있는 애나 이모가 있다고 해볼게요. - 애나 이모한테 옷을 50개 보내야 해요. 여러분이 옷을 50개 따로 보내느 것보다 50개 한번에 싸서 보내는게 좋겠죠. - 그런 것처럼 이렇게(스프라이트) 하면은 통신을 몇 십번 할거를 한번만 하면 되잖아요. - 우리나라 처럼 인터넷 빨리 되는 곳에서는 체감 잘 안되실 거예요. - 그래도 우리 예전에 전화로 pc 통신 하던 그 때는 의미가 있습니다. - 아직도 외국에 특정 지역은 어때요? 느리기 때문에 이렇게 되어 있습니다. - 그러면 이거 우리 어떻게 쓰면 될까요? - 제가 이미지 '다크모드' 이거 한번 가져와보겠습니다. - [강의설명](https://codepen.io/sangwon7242/pen/WNdVQBO) ## 147강, 상품이미지 호버 텍스트 효과, 작업 1, 상품리스트 시작 - [강의설명]() ## 148강, 상품이미지 호버 텍스트 효과, 작업 2, 상품리스트 완성 - [강의설명](https://codepen.io/sangwon7242/pen/MWQgmgL) ## https://to2.kr/dEx 사이트 만들기 - 테일윈드 적극활용(반응형 꺼주세요.) - 그 말인즉슨(.container 없애고, 직접, .con, .con-min-width 적용) - 폰트어썸 활용 - 철저하게 bem 에 의거해__menu-1, .prod-list-box - HTML과 CSS에 적절한 양의 주석 - 웹폰트 적용 - 1단계 : 상단바 - 2단계 : 상단바, 2차메뉴(absolute) - 3단계 : 상품리스트 - 4단계 : 합침 - 각 단계각 완성될 때 마다, 디스코드에 댓글과 함께 스샷첨부 # 04-29, 수업 내용 - 148강 다시 설명 ## 149강, 디자인 레몬 상단바 구현, 작업 1, 일단 구현 - 상품구현 2 정담 포크 - [강의설명](https://codepen.io/sangwon7242/pen/JjpPNrR) ## 150강, 디자인 레몬 상단바 구현, 작업 2, 세부조정 - [강의설명](https://codepen.io/sangwon7242/pen/bGLbRGy) ## 151강 - 유용한 사이트 소개 ---- ## 160강 - [테일윈드 JIT 모드 소개](https://codepen.io/sangwon7242/pen/YzaKRay) ---- # 카카오 모작 - [탑바, 메뉴바](https://slog.gg/p/7720) - [탑바, 2차 메뉴](https://slog.gg/p/7720) ## 상단 배너박스 1 - [상단 배너](https://codepen.io/sangwon7242/pen/mdxdRqe?editors=1100) - [상단 배너, 컨텐츠 삽입](https://codepen.io/sangwon7242/pen/eYMYadJ?editors=1100) - 배너참고 자료 : [https://codepen.io/sangwon7242/pen/QWmWpgZ](https://codepen.io/sangwon7242/pen/QWmWpgZ) ## 상단 배너박스 2 ~ 6 - [상단 배너박스1 레이아웃 잡기](https://codepen.io/sangwon7242/pen/VwXYXWR) - [상단 배너박스2 레이아웃 잡기](https://codepen.io/sangwon7242/pen/RwMNMjX) - [상단 배너박스3 레이아웃 잡기](https://codepen.io/sangwon7242/pen/dymPmeL?editors=0100) - [상단 배너박스4 ~ 5 레이아웃 잡기](https://codepen.io/sangwon7242/pen/gOebeda?editors=1100) - [상단 배너박스, 세부 디자인](https://codepen.io/sangwon7242/pen/PoRqVwJ?editors=0100) - [상단 배너박스2 ~ 6, 발견되면 활성화 되는 라이브러리 연습](https://codepen.io/sangwon7242/pen/WNzvPOY) - [상단 배너박스2 ~ 6, 발견되면 활성화 되는 라이브러리 연습 2](https://codepen.io/sangwon7242/pen/ExEjrLK) - [상단 배너박스2 ~ 6, 발견되면 활성화 되는 라이브러리 적용](https://codepen.io/sangwon7242/pen/poLJGYo?editors=1100) - [상단 배너박스2 ~ 6, 발견되면 활성화 되는 라이브러리 적용 2, 활성화 횟수조절](https://codepen.io/sangwon7242/pen/xxWGvYe) - [상단 배너박스 2 ~ 6, 발견되면 활성화 되는 라이브러리를 적용 3, 애니메이션 속도감조절](https://codepen.io/sangwon7242/pen/XWEmNOX) ## 대출박스 - [대출박스, 밤이 되는 애니메이션](https://codepen.io/sangwon7242/pen/gOeagbB) - [대출박스, 밤이 되는 애니메이션 2](https://codepen.io/sangwon7242/pen/gOeagXE) - [대출박스, 해와 달 만들기](https://codepen.io/sangwon7242/pen/ExEVZpb) - [대출박스, 별 만들기, 기존 소스 가져오기](https://codepen.io/sangwon7242/pen/jOzbBVw?editors=0100) - [강사 정리소스코드](https://codepen.io/sangwon7242/pen/OJvypWN) - [대출박스, 별 만들기, 기존 소스 가져오기 2](https://codepen.io/sangwon7242/pen/GRxpWEp?editors=1100) - [대출박스, 별 만들기, 별 적용하기](https://codepen.io/sangwon7242/pen/OJvypZb) --- - [대출박스, 밤에서 낮이 될때 달 관련 버그수정](https://codepen.io/sangwon7242/pen/rNdORbz) - [대출박스, 텍스트 내용 넣기](https://codepen.io/sangwon7242/pen/gOeaEJN?editors=1100) ## 체크카드박스 - [체크카드박스, 상단 텍스트 내용](https://codepen.io/sangwon7242/pen/zYWvXLm) - [체크카드박스, 슬라이더 레이아웃](https://codepen.io/sangwon7242/pen/RwMWOqW?editors=0110) - [체크카드박스, 슬릭 슬라이더로 연습, 레이아웃](https://codepen.io/sangwon7242/pen/PoRPvZm?editors=0110) --- - [체크카드박스, 슬릭 슬라이더로 연습, 좌우버튼 꾸미기](https://codepen.io/sangwon7242/pen/ExEPKaJ?editors=0010) - [체크카드박스, 슬라이더 적용](https://codepen.io/sangwon7242/pen/oNqbwgW?editors=0110) ## IT 기술 박스 - [IT기술박스, 구현](https://codepen.io/sangwon7242/pen/PoRZjpy?editors=1010) ## 하단바 - [하단바, 레이아웃, box-2까지](https://codepen.io/sangwon7242/pen/QWmyzLb?editors=1100) - [하단바, 레이아웃, box-3까지](https://codepen.io/sangwon7242/pen/ExEPGep) ## 병합 - [병합, 일단 합치기]() - [세부 디자인 수정](https://codepen.io/sangwon7242/pen/PoRNYJm?editors=1100) ## 로컬작업환경으로 옮기기 - [로컬작업환경으로 옮기기] - Image Downloader - 바탕화면 kabang --- ## 실무팁 - [무한하게 이어지는 marquee 효과를 흉내](https://codepen.io/sangwon7242/pen/QWxdMEg?editors=1100) - [무한하게 이어지는 marquee 효과를 흉내, 실전예제](https://codepen.io/sangwon7242/pen/YzvNxpz) - [롤링배너, Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/index.html) - [https://summerfruit.tistory.com/2](https://summerfruit.tistory.com/2) # 도메인 관련 - [도메인 DNSZI 가입](https://docs.google.com/document/d/1ZAoZulLaCkzocrJZHoBckUaXFJU12Y7uhq9lQN43gV4/edit) - [도메인, 가비아 가입 후 도메인 구매](https://docs.google.com/document/d/129lAJtqoBSZVcTsx-72_SNgLfiaU9N72FHS07NaFH3s/edit) - [도메인, 가비아의 도메인을 dnszi에서 관리하도록 DNS 서버 변경](https://docs.google.com/document/d/1Fjgov5TzMSwJWwxfdTD9E9ef9WuD-V0Lf7a94HtC-8M/edit) - 개념 - 가비아의 도메인을 dnszi에서 관리하도록 DNS 서버 변경 - 가비아 로그인 - https://my.gabia.com/service#/?carve_code=domain 접속 - [도메인, DNSZI CNAME 설정을 통해서 깃허브페이지에 커스텀 도메인 적용]()