AI SCHOOL

HTML 기초 #1

📘 오늘 배운 것 > 설계도면 가장 시간을 많이 할애해야 하는 부분 연습 때 웹페에지에서 부분적으로 뜯어서 연습하는 것을 추천 도면 작업시, 주로 비슷한 리스트를 div 태그로 묶어서 사용 ul 태그는 동급의 정보 입력시 사용 > FOOTER 영역 > 예제)

📘 오늘 배운 것 📌 오늘의 Tip (입문 단계 추천!) ❔ 어려웠던 것 OR 힘들었던 것 💡 해결 방법! 🌱 공부를 마무리하며, 👉 앞으로 학습방향

📘 오늘 배운 것 > ### 1. 가상선택자 행동과 규칙에 의해 디자인 적용하는 것 1) 폰트 가상선택자 2) 일정한 규칙을 바탕으로 한 디자인 3) Before, After 가상선택자 디자인으로 들어가는 것 뿐, 어떤 정보를 포함하고 있진 않음 ! >###

📘 오늘 배운 것 >### 1. ⭐) CSS 레이아웃 1) 박스모델 레이아웃을 빠르게 파악할 수 있는 일종의 옵션 ✔ margin, border 선택된 영역이 주체가 되어 움직이는 것이 아니라 긴 공백에 의해 타의적으로 움직인다. 결과값, 300x300 공간의 크

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀👇👇👇z축의 높이에 영향을 미치는 속성( 숫자값만 입력, 단위는 생략 ), 더 높은 z-index 값을 가진 것이 위로 올라옴 !\-> z축 높이값을 지정한다는 것은 3차원에서만 사용이 가능하며, 3

1) 버튼의 높이값이 있는 경우text-align: center; 중앙으로 정렬height값과 line-height값을 동일하게 주기2) 버튼의 높이값이 없는 경우\-> 글자 기준 위,아래 동일한 padding 값 주기}.menu li { float: left; wid

자바스크립트를 사용하지 않아도 일부 간단한 애니메이션 구현이 가능해졌다 !확대, 축소, 위치변경 등을 할 때 사용1) rotate : 양수(오른쪽 회전) 음수(왼쪽 회전)2) scale : (x축,y축) 가로,세로 크기 비율 조정3) skew : 3차원 회전4) ⭐ t

https://animate.style/사용 방법 👇아래 link 태그 입력Utility classes에서 구현하고 싶은 div태그 복사해서 붙여넣기css에서 활용하기첫번째 클래스 ( animate\_\_animated ) : 애니메이션 홈페이지 연결두번째

📘 오늘 배운 것 >### 1. 미디어쿼리 📌 오늘의 Tip ❔ 어려웠던 것 OR 힘들었던 것 💡 해결 방법! 🌱 공부를 마무리하며,

https://flexbox.help/ 사이트 활용하여 정렬하기플렉스박스 사이트에서 원하는 CSS를 체크하고, 아래 CSS OUTPUT 태그를 참고하여 코드 작성결과 👇미디어쿼리 태그 작성https://www.helbak.com/💻 PC 버전📱

1) head 디폴트값 설정meta 각각 정의내리기title 타이틀 정하기link css 불러오기2) 첫 페이지 공간 작업div 공간 나누기class 각 div마다 이름 정하기 3) css 초기화 작업 및 전체적인 설계h button clear 등 앞으로 사용할 태그

이미지 사이즈 확인div로 영역 나누기 왼쪽 나무 부분오른쪽 나무 + 토끼CSS 설계깃허브 참고top 특징 자기 자신 즉, 선택된 영역만 이동시키기( 다른 영역은 그대로 ! )z-index 특징 동등한 조건, 같은 3차원인 경우 나중에 작성한 영역의 z축이 위쪽으로 배

3가지 요소로 영역나누기움직이는 달 / 오른쪽 나무 / 왼쪽 글자설계도면 작업직선으로 움직이는 애니메이션 효과margin-left: -135px 화면 바깥에서 달이 움직여야 하기때문에, 달의 width 값 만큼 왼쪽으로 더 땡겨준 것margin-left: 110%화면의

📌 일반적으로는 미디어쿼리 안쪽에 모바일작업이 이루어지지만, 덴마크 쇼핑몰에서는 미디어쿼리 바깥쪽에서 모바일작업이 이루어진다.확장명 SVG 이미지 파일의 경우, SVG 태그로 구성되어 있다.초기화 작업 (디폴트 값)\* = 모든 html태그를 뜻함box-sizing:

📘 오늘 배운 것 네이버 메인 카피캣 >#### 확장프로그램 설치 https://wpastra.com/chrome-developer-extensions/#11-wappalyzer OR 크롬웹스토에서 설치 가능 Wappalyzer 특정 웹사이트의 어떤 기술 스

📌 실습 내용 중 반복되는 내용이 많아 중요한 것만 기록해두었다 ! 로그인 부분 1차 디자인 작업좌우대칭의 부분은 https://flexbox.help/ 여기서 도움을 많이 얻었다.justify-content: space-between; 단점flex-wrap

📘 오늘 배운 것 >#### 쇼핑 카피캣 shop.html 연결하기 중앙을 기준으로 페이지가 설정되어있기 때문에 container 크게 하나 지정해주기 상단바에 검색바를 넣고 싶다면 작은 container 하나 또 넣어야함! 가운데 쏠려있기 때문에. na

📘 오늘 배운 것 📌 오늘의 Tip ❔ 어려웠던 것 OR 힘들었던 것 💡 해결 방법! 🌱 공부를 마무리하며,

webtoon.html webtoon-detail.html 2개 동시 작업토글 삽입<a> 태그로 토글 만들기아이콘 삽입 <i> </i> 태그로 아이콘 삽입❗ 아이콘은 inline요소를 가지고 있기때문에, css작업시 inline-block으로 공간을

text-decoration: underline;마우스를 올리면 언더라인이 생기는 태그똑같이 구현해내려면 자바스크립트를 이용해야하기에, 간단하게만 구현함순서에 의미가 있는 태그 ol난이도가 있는 설계 도면이다.초기화 시킨 리스트 스타일 다시 나타내는 법1) 닫기태그 누

📘 오늘 배운 것 네이버 블로그 페이지 카피캣 >#### input 설계 까다로운 부분으로 반복적인 연습이 필요 border 부분 깨짐 현상 border 생성 지점을 input 태그로 지정해줌. ![](https://images.velog.io/im

📘 오늘 배운 것 네이버 블로그 카피캣 >#### main 영역 작업 i태그 없이 이미지로 아이콘 삽입 (i태그보다 이게 더 편할 수 있기때문에) 구글에서 free icon 검색 check box가 필요하다면, free checkbox icon 으로 검색

📘 오늘 배운 것 📌 오늘의 Tip ❔ 어려웠던 것 OR 힘들었던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 네이버 뉴스 카피캣 >#### 네이버 뉴스 왼쪽 ul태그보다 div태그로 묶어주기. 한줄 말줄임 표시 긴글을 한줄로 줄여서 표현 >#### 네이버 뉴스 오른쪽 📌 오늘의 Tip 헤드라인을 먼저 작업하는 것 보다 공통된 디자인 영역

📘 오늘 배운 것 네이버 연예 뉴스 카피캣 >#### 상단 📌 오늘의 Tip ❔ 어려웠던 것 OR 힘들었던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 📌 오늘의 Tip ❔ 어려웠던 것 OR 힘들었던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 네이버 연예 뉴스 오른쪽 카피캣 📌 오늘의 Tip ❔ 어려웠던 것 OR 힘들었던 것 💡 해결 방법! 🌱 공부를 마무리하며,

그림자 효과 : box-shadow 이용https://cssgenerator.org/box-shadow-css-generator.html 사이트 활용공통된 요소를 찾아 css 디폴트 코드 작성하기그림자 box-shadowpadding 값 30pxfont-siz

📘 오늘 배운 것 📌 오늘의 Tip ❔ 어려웠던 것 OR 힘들었던 것 💡 해결 방법! 🌱 공부를 마무리하며,

li태그ul태그 사용어떤 순서를 기반을 나열된 것이 아니기 때문에 ol태그 보다 ul태그가 적합어려웠던 점은 없었고, 설계 작업 속도를 높이려 노력했음반복적인 연습이 해결 방법이라 생간된다.카피캣 연습을 많이 하다보니, 체계적인 설계가 가능해졌고 작성 시간을 줄일 수

📘 오늘 배운 것 네이버 게임 오른쪽 카피캣 >#### 기억해야 할 것 >#### 연습 결과 📌 오늘의 Tip ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 >#### 기억해야 할 것 >#### 연습 결과 📌 오늘의 Tip ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 네이버 이스포츠 왼쪽 영역 >#### 기억해야 할 것 >#### 연습 결과 📌 오늘의 Tip ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 네이버 오디오 상단 영역 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 네이버 오디오 왼쪽 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 네이버 오디오 오른쪽 >#### 기억해야 할 것 네이버 오디오 하단 >#### 기억해야 할 것 네이버 오디오 카테고리페이지 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 트위치 왼쪽 영역 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며, https://vimeo.com/568261561/090e5e9d32 1:09:00

📘 오늘 배운 것 트위치 컨텐츠 영역 (1) >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 트위치 컨텐츠 영역 (2) >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 CSS 추가 설명 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 유튜브 상단 영역 (1) >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 유튜브 상단 영역 (2) >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 네이버 모바일 1편 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 네이버 모바일 2편 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,

📘 오늘 배운 것 변수와 데이터 타입 1 >#### 기억해야 할 것 >#### 연습 결과 ❔ 궁금했던 것 💡 해결 방법! 🌱 공부를 마무리하며,