웹프로그래밍

HTML/CSS - display 란 ?

HTML/CSS - display 란 ? HTML 요소의 레이아웃을 정하는데 있어 가장 중요한 역할을 하는 것은 display 이다. display 에는 여러 속성 값이 존재하는데, inline, block, inline-block, flex, list-item, none... 등등이 있다. 이중 가장 대표적인 것은 inline 과 block 이다. * inline display: inline; inline은 요소들이 한 라인에 최대한 배치하려는 속성을 가진다. 그래서 inline 속성을 부여 받은 요소들은 자신들이 필요로 하는 최소한의 가로크기만을 가져간다. inline 의 요소들로는 , , , , 등이 있다. inline 의 또다른 특징으로는 안에 내용이 있어야 표기가 된다는 것이다. 속성값만 부여하..

HTML/CSS - position 이란?

HTML/CSS - position 이란? CSS 에서 중요한 속성인 position 에 대해 알아보자. position은 말 그대로 화면에 어떻게 배치할지를 정해주는 요소 이다. 우리가 이 position 요소에 배치에 대한 속성값을 주는 것을 포지셔닝이라 한다. 기본적으로 HTML 요소들은 position : static 속성을 기본적으로 갖는다. position : staic 은 원래 있어야하는 위치에 그대로 배치하는 것으로 포지셔닝이 안되어있다고 말한다. 그렇다면, 포지셔닝이 되어있다라는 것은 무엇을 말할까? 포지셔닝에는 여러가지 종류가 있다. relative fixed absolute sticky 이렇게 있는데 하나씩 봐보자. --------------------------------------..

HTML/CSS 웹프로그래밍 - HTML 한글 , UTF-8

HTML/CSS - HTML 한글 , UTF-8 HTML에서 한글을 사용하다보면 글이 깨져서 나오는 경우들이 있다. 깨지는걸 방지하기 위해서 사용하는 것이 바로 utf-8 이다. 이렇게 넣어서 사용하자 * meta 태그는 head 내에 넣어야 오류없이 작동하니 참고하자.

HTML - 시작하기(기본 태그)

html 에서 코드를 작성할때 필수적으로 작성해야하는 코드가 있다 바로 이 코드이다. 는 웹브라우저에게 어떤 버전을 사용할것인지를 알려주는 역할을 한다. 은 제일 최신버전의 html을 사용하는것을 말한다. (현재의 최신버전은 html5 이다.) HTML 코드를 작성할때 맨 1번째 라인에 입력하면 된다. 태그 title 태그는 웹사이트의 제목을 설정해줄때 사용한다. 이렇게 입력하면 웹사이트 창에서 이렇게 보여지게 될 것이다. 태그 h 태그는 머리말을 나타낸다 이런식으로 순차적으로 사용할 수 도 있다. 이렇게 입력해보면 이런 결과물을 얻을 수 있다. 참고로 h1에서 h2, h3... 로 갈수록 폰트크기의 기본값은 작아지게 된다. 태그 p태그는 문단을 나눌때 사용한다. p태그로 감싸 두 문단을 만들어보면 이러..