화성갈끄니까아

CSS에서 요소들을 배치하는 방법에는 float, relative, absolute 등 다양한 방법들이 있다. 그 중 최근에 많이 사용되는 flex 속성에 대해서 알아보자! ☞ display 값으로 flex를 설정하고 요소를 움직일 수 있다. 3개의 div태그를 이용하여 요소를 만들었다. flex 속성을 사용하기 위하여 부모요소를 div태그를 통하여 만들고 작성하였다. 다음은 어떠한 속성도 적용하지 않고 display: flex만 적용한 예시이다. div태그는 block요소로써 한줄에 하나씩만 접근하지만 flex를 통해서 가로정렬이 된 모습을 확인할 수 있다. 따라서 flex는 가로정렬하는데 유용하게 쓰인다는 것을 알 수 있다! 이제 속성을 이용해보자!! ☞ justify-content 속성은 x축을 담..

Display 속성 값 중 가장 기본적인 inline, block, inline-block 요소에 대해서 알아보자! 1. Inline element 인라인 요소는 기본적으로 줄바꿈 없이 순서대로 배치되며 컨텐츠 크기만큼 영역을 사용하는 요소이다. 그렇기 때문에 width와 height를 이용한 크기를 가질 수 없다. 텍스트와 같다고 이해하면 쉬울 것이다. 상하 마진 적용 불가능! but 좌우 마진 적용 가능 (패딩은 상하좌우 모두 가능!!) / / / / / / / / / / / / 2. Block element 블록 요소는 가로폭 전체의 넓이를 가지는 직사각형 형태의 요소이다. 따라서 한줄을 차지하며 블록 요소 뒤에 또 다른 요소들이 오게 되면 밑에 줄에 입력이 되게 된다. 블록 요소는 width와 h..

CSS를 사용해서 요소의 배치를 옮기는 경우 여러 방법들이 존재한다. 그 중 position 속성에 대해 알아보자! 1. position: static 모든 요소들은 position: static 값을 기본 값으로 설정하고 있다. 그렇기 때문에 어떠한 position값도 할당되지 않는다. static은 따로 쓰지 않아도 된다. 2. position: relative 원래 위치를 기준으로 이동시키는 속성이다. 다시 정리하자면, 자기 자신을 기준으로 해서 위치를 이동시킨다. 요소 위치 지정은 top, bottom, right, left를 사용하여 배치할 수 있다. 예시1) 요소1, 요소2, 요소3에 색을 입히고 요소2에 position: relative 속성을 적용시키고 위로 30px 왼쪽으로 30px을 주..

▶ HTML 띄워쓰기 기본적으로 HTML은 한번의 스페이스바만 인식하기 때문에 아무리 많은 스페이스바를 표현하려 해도 출력되지 않는다. 따라서, 2칸 이상 띄워쓰기 효과를 나타내기 위해서는 2가지의 방법이 있다. 1. 2. text-indent 첫 번째 방법은 HTML 태그안에서 사용하는 방법이다. 안녕 예시입니다. 위의 예시는 p태그에 를 입력하였다. 는 한번의 스페이스바를 누른 것과 같은 효과이다. 따라서 예시에서 6번의 를 입력하였으니 6번의 스페이스바를 누른것과 같다. 두 번째 방법은 css를 통한 방법이다. text-indent: 50px; text-indent를 통하여 50px만큼 앞에 공간을 띄운 뒤 텍스트를 출력해주는 방식이다. ▶ border HTML에서 텍스트를 입력한 뒤 해당 텍스트의..

자기소개 페이지를 구성하고 있는 CSS 코드이다. body { margin-left: 0; margin-top: 0; margin-bottom: 0; margin-right: 0; } /* --- navbar --- */ .navbar { background-color: #DAB88B; height: 60px; } .navbar:hover { opacity: 0.7; } .navbar p { font-size: 25px; font-family: 'Nunito Sans'; font-weight: bold; color: white; display: inline; margin-left: 200px; line-height: 50px; } .navbar ul { float: right; } .navbar li {..