👾

flexbox란? 기존의 display나 positon 등을 이용한 웹의 레이아웃 개발은 생각할 부분이 많고 어느 정도 한계가 존재해서 개발하기가 어려웠습니다. 이런 점을 극복하기 위해서 flexbox 개념이 도입되었습니다. flexbox를 이용하면 특별한 계산 없이 쉽게 정렬을 할 수 있고, 이를 통해 레이아웃을 편리하게 구성할 수 있습니다. flexbox 구성 flex box는 flex container(부모 요소)와 flex item(자식 요소)로 구성됩니다. flexbox를 사용하려면 부모 요소에 display: flex;를 추가하면됩니다. flex 속성을 추가한 요소가 flex container가 되고, 그 자식 요소들이 flex item이 됩니다. .flex_container { display..

transform의 기준점 설정하기 transform의 다양한 속성 값들 translate, rotate, scale을 사용하다 보면 기준점을 정해야 할 때가 있습니다. 어디를 기준으로 이동, 회전등 요소를 변형할 것인지를 정할 수 있는 속성이 바로 transform-origin입니다. transform-origin transform의 기준점을 설정할 수 있는 속성으로, 속성값은 다음과 같습니다. // 2D transformation transform-origin: x-axis y-axis; // 3D transformation transform-origin: x-axis y-axis z-axis; cs 2D transformation을 사용할 경우, 기준점이 될 좌표의 x축과 y축 값을 속성 값으로 넣..

Media Query (미디어쿼리) 미디어쿼리는 device 유형(print, screen 등)과 어떤 특성이나 수치(화면 해상도, 화면 크기 등) 에 따라 웹사이트나 앱을 수정할 때 유용한 기능입니다. 기본적인 미디어쿼리 문법은 다음과 같습니다. @media ( 조건문 ) { 실행문 } 만약 @media ( max-width: 600px) { background-color: red; } 라는 코드를 작성했다면, 화면의 크기가 600px 이하일 때, 화면의 배경색이 빨간색이됩니다. Breakpoints (중단점) 미디어쿼리의 디바이스마다의 화면 크기 breakpoint는 다음과 같습니다. @media (max-width: 600px) { } 화면의 크기가 600px 이하일 때 { } 안의 코드 실행 ex..

z-index가 없는 경우 쌓임 순서 CSS의 z-index 속성을 지정하지 않았을 때, 기본적인 쌓임 순서는 다음과 같습니다. 부모 요소의 배경과 테두리 자식 요소들 (HTML 코드 등장 순서대로) position이 지정된 자식 요소들 (HTML 코드 등장 순서대로) 1 -> 2 -> 3 순서대로 아래쪽 -> 위쪽으로 쌓여서 웹페이지에 나타납니다. 1 2 3 4 5 6 7 div1: parent div2: child div3: positioned-child div4: child div5: positioned-child Colored by Color Scripter cs 위와 같은 코드를 실행시키면 화면에 나타나는 순서는 다음과 같습니다. div1 -> div2, div4 -> div3 -> div5 순..

Goolge Fonts (구글 폰트) 사용 방법 구글 폰트를 웹 페이지에 사용하는 방법을 알아보겠습니다. 1. 사이트 들어가기 (https://fonts.google.com/) 2. 원하는 폰트 선택하기 구글 폰트 사이트에 들어갔다면, 원하는 폰트를 선택하면 됩니다. 맘에 드는 폰트를 선택해도 되고 검색을 통해 원하는 폰트를 찾을 수도 있습니다. 저는 예시로 montserrat 폰트를 검색해서 선택했습니다. 3. 폰트 스타일 선택하고 추가하기 폰트를 정했다면, 그 폰트의 다양한 스타일(글씨 굵기 또는 기울임체 등) 중에서 사용할 스타일을 선택해야 합니다. + Select this style 을 누르면 해당 폰트 스타일이 추가됩니다. 선택한 폰트 스타일은 아래 그림에 표시된 버튼을 누르면 확인할 수 있습니..

HTML Positioning Rule CSS의 position 속성을 알아보기 전에 먼저 HTML 문서에서 요소를 어떻게 배치하는지 그 규칙에 대해 설명하겠습니다. 1. Content is everything. inline 요소에서는 요소의 content의 크기가 곧 요소의 크기가 됩니다. 2. Order comes from code. HTML 문서에서 코드에 작성한 순서대로 요소가 배치됩니다. 예를 들어, HTML 파일에 This is first. This is second. 라는 코드가 있다면, h1이 h2보다 먼저(위에) 작성되었기 때문에 화면에서도 위에 나타납니다. 3. Children sit on parents. 자식 요소는 부모 요소 위에(겹쳐서) 나타납니다. Parent Children C..

display 속성 CSS의 display는 요소가 어떻게 보여질 지를 결정하는 속성으로, 구문은 다음과 같습니다. display: value; value에 주로 쓰이는 속성값은 block, inline, inline-block, none이 있습니다. block 요소 block 요소에는 , ~, , , , , 등이 있습니다. 이 요소들은 width와 height를 지정할 수 있고, 만약 지정하지 않았을경우 전체 가로 사이즈를 가집니다. 또한 block요소 다음에 오는 요소는 새로운 line에서 시작하기 때문에 요소들이 아래로 쌓이게 됩니다. 1 2 3 4 Hello cs 은 width를 정하지 않았기 때문에 화면 전체가 가로사이즈가 되고, 3개의 는 width: 100px; height: 100px로 설..

CSS 박스 모델(Box Model) 크롬 브라우저에서 마우스 우클릭 -> 검사 또는 Ctrl + Shift + I 를 눌러서 나오는 개발자 도구에서 Elements 탭을 누르면 다음과 같은 박스 모델을 볼 수 있습니다. content 영역 : 글, 이미지, 비디오 등 실제 내용을 포함하는 영역 padding 영역 : 안쪽 여백; border와 content 사이의 영역 border 영역 : 테두리 margin 영역 : 바깥쪽 여백; 다른 태그까지의 거리 이때 padding, border, margin은 width에 포함되지 않기때문에 요소의 전체 width를 계산하려면 이를 포함시켜줘야 합니다. 예제: width 구하기 1 2 3 4 5 6 div { width: 320px; padding: 10px;..

CSS 구문(Syntax) 구조 CSS의 기본 구문은 다음과 같다. selector { property: value; } selector(선택자) // 어떤 요소에 CSS rule을 지정할 것인지(Who) property(속성) // 선택한 요소에서 무엇을 변경할 것인지(What) value(속성 값) // 속성을 어떤 값으로 변경할 것인지(How) CSS 선택자 CSS의 기본 선택자는 다음과 같습니다. 1. 전체 선택자(Univeral Selector) 전체 선택자(*)는 말 그대로 모든 요소를 선택합니다. 1 2 3 * { color: red; } cs 2. 태그 선택자(Type Selector) 태그 선택자(elementname)는 요소 이름이 elementname인 요소들을 선택합니다. 1 2 3..

CSS CSS란 Cascading Style Sheet의 약자로 마크업 언어를 스타일링하기 위한 언어입니다. HTML이 뼈대, 구조를 위한 언어라면, CSS는 디자인, 스타일링을 위한 언어라고 할 수 있습니다. HTML 파일에 CSS 코드를 추가하는 방법은 3가지가 있습니다. Inline CSS Internal CSS External CSS Inline CSS html의 태그 내에 style 속성을 추가하는 방법입니다. style 속성은 css 코드를 값으로 받는데 이때 여러 값들은 ; 로 구분합니다. 1 Hello cs Hello 하지만 이 방식은 거의 쓰지 않습니다. 만약 문서 내 모든 태그의 색깔을 검은색으로 바꾸고 싶다면, 문서 내 모든 태그의 속성을 수정해야 되기 때문입니다. Internal C..