👾

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 순..

그리드 시스템 (Grid System) 부트스트랩은 layout과 content 정렬을 위한 그리드 시스템을 제공합니다. 그중에서 container, row, column에 대한 사용 방법과 예시는 다음과 같습니다. 1 2 3 4 5 6 7 column1 column2 column3 cs 1. container - container가 감싸고 있는 contents를 가운데 정렬해줌 - 반응형으로 width를 지정하고 싶을 경우 => .container 사용 - width를 화면의 100%로 지정하고 싶을 경우 => .container-fluid 사용 2. row - column을 감싸주는 역할 3. column - row에 들어가는 각각의 content - 옵션을 지정 안 하면 블록 요소처럼 한 줄씩 차지..

부트스트랩 Navbar 설명 부트스트랩의 Navbar는 많은 웹페이지의 화면 상단에서 볼 수 있는 메뉴 바의 기본 틀을 제공합니다. 부트스트랩 사이트(https://getbootstrap.com/)의 Documentation 탭에서 Navbar를 검색하면 자세한 설명과 함께 예시 코드를 볼 수 있습니다. 부트스트랩 사이트의 Examples 탭에 있는 Navbar fixed 예제를 만들어보겠습니다. Navbar의 Documentation에 있는 기본 코드를 실행하면 다음과 같은 Navbar가 만들어집니다. 여기서 변경해야할 점은 다음과 같습니다. 1. 화면의 크기가 medium 이하일 때 toggle 버튼이 생기도록 변경 2. Navbar의 배경 색을 dark로 변경 3. Navbar-brand의 텍스트 ..

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..