IT이것저것/HTML, CSS6 [HTML/SCC] 005. 버튼 위치 정하는 css position 속성들 정리 버튼 위치 정하는 css position 속성들 정리 position의 가장 큰 특징 1. 좌표이동이 가능하다 2. float 속성처럼 공중에 뜨는 특징이 있다 (그래서 사용자가 화면에서 스크롤을 내려도 따라다니는 특징이 있다) position의 속성 4 가지 position : relative; // 내 원래 위치를 기준으로 이동position : absolute; // 내 부모 위치를 기준으로 이동(position : relative가 있는 부모기준)position : fixed; // 사용자가 보는 전체 표면 기준으로 이동position : static; // 기준 없이 고정시킴 그리고 나서top, bottom, left, right 에 px값을 지정해주면 됩니다. 그럼 예시를 통해 위에 4가지를 .. 2024. 4. 24. [HTML/SCC] 004. <div>박스 가로로 배치하기 2가지 방법 1. 박스 가로로 배치하기 첫번째 방법 (float, clear : both) 최종적으로 만들어볼 화면은 아래와 같고, 핵심 코드는 float 와 clear: both; 입니다. 1. container 박스를 만들고 그 안에 4개의 박스를 넣습니다. 2. 각각의 style의 영역을 width와 height로 설정해주고 background-color를 넣어줍니다. 3. 각 div 박스는 height의 세로로 지정된 영역을 모두 차지하기에 left와 right 를 띄운다는 의미의 float를 입력합니다. float: left는 화면 왼쪽을 기준으로 붕 띄운다. float: right는 화면 오른쪽을 기준으로 붕 띄운다. 는 뜻입니다.그럼 아래와 같은 화면이 출력됩니다. 위에 화면은 사실 left와 right.. 2024. 4. 22. [HTML/SCC] 004. 이미지 가운데 정렬, 배경화면 어둡게 하는 방법 1. 배경화면을 가운데로 정렬하는 방법 배경화면을 만들어서 가운데로 정렬하는 방법에 대해 알아보도록 하겠습니다. 3가지 코드만 알면 되는데요, background-image: url("__여기에 원하는 이미지 주소 복사__"); background-position: center; background-size: cever; 이렇게 3가지만 style에 추가를 하면 이미지를 넣어서 해당 이미지를 가운데 정렬할 수 있습니다. 1) "background-image"로 원하는 이미지를 넣고 2) "background-position"으로 이미지를 가운데로 옮기고3) "background-size"로 우리가 정한 width와 height 사이즈에 맞는 이미지의 일부분만 보여주는게 아니라 전체 이미지를 보여주게하여,.. 2022. 5. 24. [HTML/CSS] 0003. 글씨 가운데로 정렬하는 2가지 방법 1. text- align 으로 가운데 정렬하는 방법 위와 같이 글씨가 왼쪽으로 붙어 있을때, 가운데로 정렬하는 방법은 를 사용하시면, 요렇게 가운데로 정렬이 되는 것을 볼 수 있습니다. 그리고 글씨를 아래로 내리려면 "margin-top: 20px;" 를 사용하시면 되겠죠? 2. flex를 사용하는 방법 display: flex; flex-direction: column; justify-content: center; align-items: center; 이 4개의 코드가 함께 쓰이며 글씨를 가운데로 정렬하게 해줍니다 하나씩 대입하여 변화를 보도록 하겠습니다. 좌측상단에 있을때, "display: flex;" 를 반영하면, 요렇게 일자로 나열되며, "flex-direction: column;" 을 반영하.. 2022. 5. 24. 이전 1 2 다음
