1)학습한내용/ 뉴스 메임 /.news_container { width: 1080px; margin: 0 auto;}.news_flex_between { display: flex; flex-wrap: wrap; justify-content: space-between;

1) 학습한 내용 display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;}}}.blog_main height: 305px; background-color: padding: 2

1) 학습한 내용 네이버블로그/ 네이버 블로그 /.blog_container { width: 1080px; margin: 0 auto;}}}}}}}}}}}}}}}}}}}}}.blog_main height: 305px; background-color: padding:

1) 학습한 내용 .webtoon-container { width: 960px; margin: 0 auto;}}}}} color: grey;}}}}}}}}} (icon은 inlin요소. icon이미지를 background img로 삽입할 때는 i태그에 display:

1) 학습한 내용 <-- shop.html -->style.css width: 100%; height: 240px; background-color: }}}}} }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}부모영역이 공간에 대한 구체적인 크기를 가

1) 학습한 내용네이버쇼핑 구역을 만들어보자부모영역에다가 일괄적인 디자인코드를 넣어주면, 코드분량을 간소화 하여 작성어떤영역의 구역을 나눌때 고정값이 적용 되어있다면 border값은 없는지 고려 하여 작성ex)box width : 400px 이고 border : 1px

1) 학습한 내용 justify-content: space-between 을 사용하였을때float: left 을 사용하였을때justify-content: space-between 으로 정렬이 되지 않을때에는 float: left 를 사용하여 정렬하는것을 권장}}}}}}

1) 학습한 내용🔵웹 개발에 필요한 크롬 확장 프로그램 (카피캣 시 도움이 됨)web developer chrome extension(https://wpastra.com/chrome-developer-extensions/)1\. Wappalyzer - 특정

학습 내용덴마크 쇼핑몰 실습을 햅보자기초 설정HTMLbox-sizing: border-box;}\*은 모든 HTMl 태그에 적용하겠다는 의미border-box: 패딩으로 인해 박스사이즈가 바뀌는 것을 방지html, body { width: 100%; height: 10

1) 학습한 내용 HTMLwidth: 100%;height: 800px;background-image: url(../img/oneday/night2/night2_bg.png);}width: 135px;height: 135px;background-image: url(..

forest 부분1) 학습한 내용 }}}}}}}@keyframes spinRabbitOne { from { transform: rotate(0deg); } to { transform: rotate(10deg); }}}@keyframes spinRabbitTwo { f

1) 학습한 내용키즈가오 실습 - 1상단 첫화면/ Default CSS /html, body { margin: 0; padding: 0;}body { overflow-x: hidden;}h1, h2, h3, h4, h5, h6, p { margin: 0; padding

1) 학습한 내용 반응형 적응형 웹사이트를 만들때 사용하는 미디어쿼리.모바일 태블릿 환경에 맞게 자연스런 변화를 줄때 사용되는 CSS코드미디어쿼리 모바일 버전 : 320px~768px 미만태블릿버전 : 768px~1024px 미만PC버전 : 1024px ~미디어쿼리 주

1)학습한 내용CSS 애니메이션 속성에 대하여 알아보자-2 Stylie = 코딩으로 구현하기 어려운 애니메이션은 여기로 해서 하기running : 브라우저 접속시 애니메이션동작을 시키겠다는 의미paused : 움직임을 멈추겠다는 의미fill-mode : 애니메이션이 실

1\_ 학습한 내용CSS 애니메이션 속성에 대하여 알아보자 (1:16:30)트렌스폼(transfotm) : 선택한 오브젝트를 확대하거나 축소하거나 또는 각도를 회전시키거나 위치를 변경로테이트(rotate) : 2차원적인 회전효과 (평면적으로 회전, 양수를 전달 오른쪽,

1) 학습한 내용웹사이트 레이아웃 작업에 영향을 미치는 다양한 CSS속성디스플레이, 언라인블럭 사용하지 않고 내가 선택한 영역을 X축으로 나란히 정렬시키는방법float : 기본적으로 선택된 영역을 띄운다. 같은 선상에 박스들을 배치하고자 하는 기능 (단점. 브라우저 폭

1) 학습한 내용 웹사이트 레이아웃에 필요한 CSS 주요속성<.html><.head> <.meta charset="utf-8"> <.link rel="stylesheet" type="text/css" href"css/style.css">&l

CSS 가상 선택자 - 선택한 요소에 어떠한 행동과 규칙에 의해 디자인을 적용하는 방법1) 학습한 내용 <a href=https://www.naver.com/">네이버일정한 규칙을 바탕으로한 디자인 적용before after 가상 선택자 디자인프로젝트의

1) 학습한 내용

1) 학습한 내용 설계도면실습 (ex- 카카오톡 친구 리스트) > 박지연 *친구이름(텍스트) 다정한 사람*한줄소개 카카오톡 앱 밑 하단 > *카카오톡 앱 밑 하단 메뉴1