AI Platform / Web

CSS로 Web layout(웹 UI 배치)을 하는 방법(flex, inline, block... 등등)에 대해 알아보자. 사실 초보자의 기준에서는 css에서 구조를 정리하는 것과 원하는 요소에 배치하는 것이 가장 어렵다. 핵심 위주로 간단히 정리해 보고자 한다. 사실 퍼블리셔로 css를 딥하게 공부할 거 아니면, flex만 우선적으로 이해하고 프로젝트에 적용해도 된다. 당장 마감이 임박하다면, 바로 flex를 보러가자! 1. 인라인(inline)/ 블록(block) flex를 이해하려면, 인라인/블록을 우선적으로 구별할 수 있어야한다. 기본적으로 html 태그는 인라인 요소와 블록 요소로 나누어진다. 인라인 요소는 기능이나 디자인 효과를 줄 때 사용하고, 블록 요소는 블록을 쌓듯 레이아웃을 설정하는 태..

web에서 구조를 만들거나 배치를 할 때 사용되는 Grid에 대해 알아보자. Grid를 가지고 굉장히 다양한 방법을 활용하고 복잡하게 만들 수도 있다. 그러나, 이 글을 보고 있는 대부분의 사람들은 기초 수준일 것이라 판단된다. 따라서 바로 적용가능하고 쉬운 부분위주로 짧고 쉽게 적어보겠다. 0. 들어가면서 보통 Grid 요소에서는 부모요소와 자식요소로 나누어 부른다. 부모요소를 Grid Container라고 부르고, 자식 요소는 Grid Item이라고 부른다. 이렇게 나누는 이유는 부모요소에 Grid라는 틀을 부여하고, 그 틀에 맞게 자식요소가 들어간다고 생각하면 될 것 같다. 우선은 기본 셋팅부터 하자. A B C D E F 사용법은 간단히 아래와 같이 display: grid; 라고 적어주기만 하면..

CSS 글자 폰트 스타일에 대한 기초 지식을 이 글만 보면 익힐 수 있도록 적어보겠다. 가독성을 위해 불필요한 코드는 생략하고 HTML과 CSS만 적어보고 결과를 적었다. 1. 글자 굵기 > font-weight로 설정한다. #html h1 태그 normal h1 태그 bold p 태그 normal p 태그 bold .normal { font-weight: normal; } .bold { font-weight: bold; } 결과 값은 아래와 같다. h1태그는 기본값으로 font-weight가 bold로 되어있다. 따라서 bold로 하면 변경이 되지 않는다. h1태그의 font-weight를 normal로 설정하면 굵기가 줄어든다. p태그는 기본값으로 font-weight가 normal로 되어있다. 따라..

css는 html의 태그와 연결된다. 그렇다면, html과 css를 연결하는 방법도 알아야 한다. html 태그와 css를 연결하는 여러가지 방법에 대해 알아보자. 1. 기본태그 1.1 태그 선택자 : 태그 자체를 바로 선택 # html Hanpy # css h1 { color: red; } 1.2 자손 선택자 : 모든 내부 태그에 적용 # html 빨강이다 li태그 1 여기도 빨강이다 # css div a { border: 1px solid red; } div태그 내부에 있는 모든 a 태그에 적용이 된다. 이를 자식태그라고 한다. 1.3 자식 선택자 : 바로 밑 태그만 적용 만약 바로 밑의 자식인 직계자식만 적용하고 싶다면 아래와 같이 css에 >만 추가하면 된다. # css div > a { bord..

초기화 하는 방법은 다양하다. 자주 쓰이는 것들 위주로 알아보자. # 구성 index.html css/style.css html에 css 연결 head의 title 밑에 link 태그를 넣어준다 link 태그의 href는 css 파일의 경로를 넣어준다. : html과 css 연결 경로가 ./css/styles.css 이다. css 초기 설정 @charset "UTF-8"; * { margin: 0px; padding: 0px; } ul, ol { list-style: none; } a { text-decoration: none } @charset "UTF-8" : UTF 설정해야 한글이 꺠지지 않게 인코딩 방식으로 utf-8로 설정한다. 구문 끝에는 ;(세미클론)을 붙여준다. * : 모든 것들을 선택이라..

1. CSS란 CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. CSS는 웹페이지에서 스타일이나 레이아웃에 이용된다. 그리고 html 웹페이지 자체에서도 사용 가능하고, 따로 css 파일을 만들어서 불러오는 방식으로도 사용 가능하다. 매우 기초적인 것 중에 중요한 부분 위주로 정리해 보겠다. 그 이후에 CSS 구조 정리로 넘어가자 .html 문서와 같은 폴더..