대구ai스쿨

학습한 내용 웹프로그래밍이란 무엇인가! html css javascript 레이아웃 종류 https://blog.teamtreehouse.com/which-page-layout 정적, 동적, 적응형, 반응형 레퍼런스 사이트 참고 디비컷,지디웹, awwwards, m

학습한 내용 HTML tag 리스트 및 종류 확인 가능 사이트 w3scools.com ★중요포인트★ 이것은 약속이니까... 외우자...찡긋 >## Inline 글자가 한 줄로 출력 >> Block Block Block 공간에 대한 크기를 설정할 수 있음

학습한 내용 html 디자인 적용 방법 head 태그 안 style태그 css는 중괄호안에 적용해야함 color css속성 red; 속성값 css 속성값을 입력하면 마침으로 세미클론; 써야함! tag안 스타일 속성 추가 다이렉트로 문법작성 치명적인 단점 코드 분

학습소감

학습한 내용 >### ⭐️박스 모델 box-model⭐️ margin border 바깥쪽 부분 배경색의 영향은 받지 않지만, 크기에는 포함됨 padding cotent와 border 사이의 간격 벌어진 공간 +원래 공간 border (테두리) 콘텐츠와 패딩을 감싸는 테

z축 높이에 영향을 미치는 속성형제관계에서 absolute나 fixed를 사용하면 레이어가 겹쳐는 상황 발생 주의할 점 : z축에 있다 (3차원적인 특징을 가진 포지션에서 사용가능함) \*형제관계에 따른 포지션 속성값첫번째로 나오는 형제의 포지션이 2, 3차원인지에

CSS 레이아웃 이론을 토대로 실습을 진행홈페이지 메뉴 부분과 카카오톡 친구리스트를 만들었다.태그 입력 전margin과 padding 값을 이미 가지고 있는 html, body, ul값을 0으로 입력해주고시작해야 수월하게 진행할 수 있다!네이버까지 해야하나 카카오톡 친

학습한 내용 css 애니메이션 인터렉션한 효과을 구현하기 위한 기능 과거에는 자바스크립트에서만 가능했으나 CSS가 발전되면서 일부 기능 가능하게 됨! transform 오브젝트의 크기를 축소 및 확대 각도 조절, 위치 변경할 때 사용 rotate 속성 2차원 회전

1.메뉴박스opacity불투명도 조절하는 속성메뉴 박스에 있는 모든 요소를 투명화 시킬 수 있음📌글자에 opacity를 넣지 않으려면 ex) -4번째 자리(alpah)는 색상의 투명도를 뜻하며 배경에만 영향을 줌 1로 지정했을 경우 불투명도는 100% (투명도 0%

학습한 내용 미디어쿼리 >#### 미디어쿼리 웹사이트를 모바일, 태블릿 환경에 맞도록 변화시키기 위해 설정 사용자가 접속한 기기의 width값을 기준으로 환경 파악 가능 📌check 320 ~768px 미만 스마트폰 768 ~ 1024px 미만 태블릿 1024px

학습한 내용 지난 주에 배웠던 미디어쿼리 이론을 토대로 실습을 진행했다. >실습 1 >실습 2 >실습 3 어려웠던 점 학습소감

학습한 내용 어려운 점 학습소감

📌키즈가오 홈페이지 실습http://sisikiller.dothome.co.kr/Sciencenightmorningkitchen연기(?) 애니메이션https://jeremyckahn.github.io/stylie/ 에서 소스값을 설정하여 서브라임 텍

학습한 내용 >✔덴마크 쇼핑몰 카피캣 실습 (저작권으로 인해 레이아웃 중심으로만!) >* 반응형 웹사이트 setting 📌Viewport값 default로 넣기; .svg (이미지 확장자) svg태그를 사옹해서 이미지를 구성함 >* 상단 오른쪽 메뉴 버튼 3개

📌 개발에 유용한 chrome 확장 프로그램wappalyzer 특정 웹사이트가 어떻게 개발되었는 지, 어떤 기술을 썼는 지 알 수 있음!css viewer 특정 웹사이트의 css 속성(값), 요소를 알 수 있음whatfont 어떤 폰트가 사용됐는 지 알 수 있음다만,

📌네이버 오른쪽 영역영역 배치 float로도 해보기!📌네이버 하단이 부분 앞에서 나온 코드와 비슷해서 수월하게 넘어감가상선택자 before부분에 대해 더 공부할 생각!(당연하지만)이미지도 넣을 수 있다고 하는데 혼자서 한번 해봐야겠다.다만 content에 공백을

📌네이버 쇼핑 카피캣 1shop-container다른 페이지와 연결되야하기 때문에 NAV태그 사용!ul에서 flex 넣어 정렬!li에 margin-left 값 넣기!list-itemoverflow: hidden 로 설정category-rightbottom 추천태그 부

📌 네이버쇼핑 카피캣2어제에 이어 오늘도 div태그의 향연으로 인해 오류가 많았다.( 잘만 넣었던 리스트들이 안보임;;)플러그인을 설치해도 헷갈리니 골치가 아프지만 더 집중하고 꼼꼼하게 봐야겠다는 생각이 든다.이런 시행착오를 겪어야 프로젝트 할 때 더 잘 할 수 있다

📌네이버 웹툰 홈페이지 카피캣오늘도 역시나 div태그의 향연으로 인해 헤멘 곳이 꽤 있었다.연습하면서 줄일 수 있는 부분은 더 줄일 수 있도록 노력해야겠다.자바스크립트 강의도 들어야하는데... 들을 수는 있겠지...?폭염때문에 집중력이 떨어지는데 그래도 참아보자 잘해

📌 네이버 웹툰 카피캣2webtoon-detail 부분 ( 헷갈려서 다시 복습함! )랭킹부분숫자 랭킹 부분을 문단 가운데정렬(?)로 설정하고 싶은데 잘 되지 않는다.실습코드를 보고 네이버 css를 봐도 아직까지 해결하지 못함.자바스크립트로 해야되나...?📌 네이버

학습소감

📌네이버 뉴스 메인 카피캣 1input 태그공부를 더 해야함!placeholder 검색창의 기능을 미리 적어둘 때 사용!input:focus 에서 아웃라인 컬러와 두께를 설정함두께가 조금 더 얇았으면 좋겠는데 여기까지가 최선인 듯...article 태그독립적인 글을

네이버 메인 왼쪽 영역

📌네이버TV연예 카피캣헤더✔ 마진병합현상은 margin-top, margin-bottom에서 일어남✔ 네이버 border값이 전과 다르게 독특하게 설정되어 있음메인(수정 중)오른쪽(수정 중)헤더는 간단하다보니 쉽게 넘어가는데 메인과 오른쪽은 헷갈린다. 그래도 전보다는

학습한내용 학습소감

학습한 내용 >📌네이버 TV연예 카피캣3 오른쪽 css 학습 소감 >

학습한 내용 >📌네이버 게임 사이트 카피캣 자바스크립트 기반 CSS box-shadow 참고사이트 https://cssgenerator.org/box-shadow-css-generator.html 학습소감

📌네이버 게임 카피캣 2

📌네이버 e스포츠 상단영역 카피캣

📌네이버esports 홈페이지 오른쪽 영역 카피캣 📌네이버 오디오클립 상단 영역 카피캣

📌네이버 오디오클립 홈페이지 왼쪽영역

📌네이버 오디오클립 홈페이지 오른쪽 카피캣

>📌네이버오디오클립-카테고리 카피캣 >📌트위치 상단 영역 카피캣

📌트위치 왼쪽영역 카피캣

학습한 내용 >📌트위치 홈페이지 콘텐츠 영역 카피캣

📌트위치 홈페이지 카피캣 마무리✔

CSS 부가 설명

📌유튜브 상단영역 카피캣

📌유튜브 왼쪽 영역 카피캣✔checkword-break 텍스트를 줄바꿈할 때 사용하는 속성값word-break : keep-all; 단어 단위로 줄바꿈word-break : break-all; 글자 단위로 줄바꿈비교적 심플하고 간단해서 무난하게 넘어감 다만 줄바꿈이

📌 유튜브 메인 카피캣

학습한 내용 >### 📌JavaScript

자바스크립트 기초

📌null과 undefinednull 변수 초기화를 통해 명시적으로 빈 값을 변수 안에 할당한 상태undefined 변수를 선언만 한 상태✔🛑tip! 차이점typeof 어떠한 데이터 타입인 지 출력해줌console.log(typeof null); -> object왜