Euncheol Kim

* 요약 빨간색 : 모르는 개념 코드 스테이츠 학습 내용 개인적 공부 학습 내용 CSS : align-items, display: flex, flex(felx-direction/grow/shink/basis), justyfy-content, align-items, align-self, flex-wrap, flex-flow align-content Wireframe, Mock-up x 1 ] 코드스테이츠 교육관련 1. 학습 키워드 align-items, CSS, display: flex, flex(felx-direction/grow/shink/basis), justyfy-content 화면분할 2. 학습 목표 다양한 CSS 셀렉터 규칙을 이해할 수 있다. 레이아웃을 위한 HTML을 만들 수 있다. 아래와 ..

goal CSS레이아웃을 구성하는 방법에 대해서 이해한다 1 ] CSS 구성하기 1. 레이아웃 구성에 어려움을 겪는 경우 태그가 가진 기본 스타일에 약간의 여백이 있어 박스의 시작을 (0,0)위치에서 시작하지 못하는 경우 width, height 계산이 여백을 포함하지 않아 계산되는 경우 (*box-sizing으로 해결한다) 브라우저의 종류(크롬, 사파이 ,IE 등)에 따라 여백이나 글꼴, 기본스타일이 조금씩 다름 3가지 문제의 해결법 CSS파일 * { box-sizing: border-box; } body { margin: 0; padding: 0; } ※ 위의 문제들을 해결하기위해 표준화된 라이브러리들이 제공되기도 한다. 2. 분할의 종류 수직분할 : 화면을 수직으로 구분하여, content가 가로로..

외부자료 CSS3 Selector셀렉터, https://poiemaweb.com/css3-selector, poiemaweb

flex관련 기술 블로그 : 이번에야말로 CSS Flex를 익혀보자, https://studiomeal.com/archives/197, 1분코딩​

goal inline요소와 block요소의 특징과 태그의 종류를 알아본다. 1. HTML태그의 태생, inline요소 vs block요소 [1] inline요소와 block요소의 개념 및 태그 종류 용어 설명 태그 종류 용어 설명 태그 종류 inline 요소 줄바꿈이 일어나지 않는 태그 width, height의 속성이 적용x 컨텐츠(content) 내용의 범위만 차지한다. span, button, img, input, label, script, select, span, strong. textarea 등 block 요소 줄바꿈이 나타나는 태그 width, height의 속성 적용 o - 만약, 따로 width의 속성이 적용이 안 되어있을 때 block속성 태그는한 줄을 모두 차지하게 된다. div, fo..

goal 레이아웃 구성에 큰 영향 및 태그의 성질을 바꾸는 display 속성에 대해서 이해한다. 1 ] display속성 1. 개념 layout을 결정하는 css의 중요한 속성 중 하나이다. dislapy의 설정 여부에 따라 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정한다. 2. [중요] display적용으로 이해하기 index.html none-div block-div inline-div inline-block_div index.css .none_div{ /* display: none; */ background-color: yellow; } .block_div{ display: block; background-color: brown; /* width: 200px;*/ height: 200px; ..

goal css의 단위의 종류를 알고 개념에 대해서 이해한다. 1 ] (중요)CSS단위의 종류 : vw, vh (이외에도 다양한 종류가 존재) 다양한 단위를 알기위한 참고자료 : https://nykim.work/85 단위 설명 절대 단위 px, pt 상대 단위 %, em, rem, ch, vw, vh rem : root의 글자 크기를 중심으로 배로 증가시킨다. root는 1rem이며, 상대적 크기 증가를 하고 싶으면 2rem으로 조절 자주 사용한다. vw (viewport Width) : 뷰포트를 기준으로 하는 너비의 단위 1vw = 뷰포트 너비의 1% (만약, 500px너비의 뷰포트인 경우, 1vw = 5px) viewport란, 브라우저에서 사용자에게 보이는 부분을 말한다. vh (viewprot ..

goal HTML에 CSS를 적용시키는 3가지 방법에 대해서 이해한다. - link태그, style태그 1 ] HTML에 CSS 적용시키기 ... link태그 : HTML파일과 다른 파일을 연결하는 목적으로 사용 link태그의 rel : 연결하는 파일의 역할과 특징 [1] CSS적용 방법 3가지 인라인 스타일 : 적용할 태그 바로 옆에 style 옵션으로 css를 주는 것 내부 스타일 : style 태그의 명세로 HTML에 정의하여 사용하는 것 외부 스타일 : 다른 파일에 CSS를 저장시키고, link로 가져다 쓰는것 참고 자료 : [css]정리 - 스타일 적용 3가지 방법 인라인/내부스타일시트/외부스타일시트, everfree, https://m.blog.naver.com/PostView.naver?is..