영벨롭 개발 일지

우리는 크기를 설정할 수 있는 블록 요소로 레이아웃을 짜야 합니다. 하지만 블록 요소는 수직으로 쌓이는 속성이 있죠? 그렇다면 블록 요소들을 가로배치하는 방법에는 어떤 것들이 있을까요? 바로 float, flexbox, grid 속성이 있습니다. 하나씩 차례대로 살펴봅시다. float - 왼쪽이나 오른쪽으로 배치하기 float 속성은 요소를 문서 위에 둥둥 떠 있게 만듭니다. 여기서 '둥둥 떠 있다'라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻입니다. 속성 값 설명 left 요소를 문서의 왼쪽에 배치 right 요소를 문서의 오른쪽에 배치 none 좌우 어느 쪽에도 배치하지 않음 box1 box2 box3 .box div{ font-size: 20px; border: 3px solid b..

박스 모델은 블록 요소인지 인라인 요소인지에 따라 나열 방법이 달라집니다. 그러므로 블록 요소와 인라인 요소의 차이점을 살펴보고싶으시다면 다음 포스팅을 봐주세요! https://iridescent-zeal.tistory.com/75?category=1261251 [HTML]인라인 요소와 블록 요소: 요소가 화면에 출력되는 특성 요소가 화면에 출력되는 특성에는 글자와 상자, 크게 2가지로 분류할 수 있습니다. 글자는 인라인(inline) 요소, 상자는 블록(block) 요소인데요! 하나씩 살펴봅시다. 먼저 요소(elemnet)란 기본적 iridescent-zeal.tistory.com 박스 모델 Box Model 박스 모델 요소는 박스 형태인 요소를 말합니다. 박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠..

박스 포스팅(https://iridescent-zeal.tistory.com/95?category=1261251)에서 박스를 다루는 몇 가지 방법을 살펴보았습니다. 오늘은 박스의 구성하는 것들 중 margin과 padding을 자세히 살펴보겠습니다. Margin 과 padding margin은 박스 요소와 웹 페이지 사이의 여백 즉, 요소의 외부 여백을 지정하는 단축 속성입니다. padding은 요소의 내부 여백을 지정하는 단축 속성입니다. 속성 값으로는 다음과 같은 값들을 지정할 수 있습니다. (아래 설명은 padding에도 동일합니다.) 속성 값 설명 0 외부 여백 없음 auto 브라우저가 여백을 계산 단위 px, em, vw 등 % 부모 요소의 가로 너비에 대한 비율로 지정 margin과 paddi..

우선 다음과 같이 코드를 작성해보겠습니다. Hello World 태그는 블록 요소로, 요소가 수직으로 쌓이는 것을 확인할 수 있습니다. 이 두 개의 태그를 각각 왼쪽, 오른쪽에 같은 줄에 위치시키기 위해선 어떤 속성을 부여해야할까요? 먼저 text-align 속성을 사용해보겠습니다. .hello { font-size: 30px; font-weight: bold; text-align: left; } .world { font-size: 30px; font-weight: bold; text-align: right; } 각 요소들이 왼쪽, 오른쪽 정렬은 되었지만 여전히 다른 줄에 위치해있죠? 블록 요소를 같은줄에 왼쪽, 오른쪽 정렬하기 위해선 float 속성을 사용합니다. float 말 그대로 요소를 '둥둥 띄..

오늘은 박스에 관련된 CSS 속성을 알아보고 박스를 갖고 놀아보겠습니다 ㅎ ㅎ 초기 박스 먼저 아무 스타일이 적용되지 않은 박스를 볼까요? html 파일에 다음과 같이 작성하면 Hello 페이지는 요렇게 보입니다. 태그를 통해 박스를 만들긴 했는데 박스 형태가 눈으로 보이진 않죠! 웹 페이지에서 f12 키를 눌러 개발자 도구의 요소(Elements) 패널로 가보세요! 그런 다음 위 코드에서 부분에 마우스를 올리면 영역이 눈에 보입니다. 웹 페이지에선 보이지 않지만 박스가 만들어진건데요! 이제 css 스타일을 적용해서 이 박스를 갖고 놀아볼게요 박스 색칠하기 & 박스 테두리 그리기 우선 박스가 눈에 보여야 갖고 놀겠죠? background-color 속성을 통해 박스를 색칠할 수 있습니다. backgrou..

선택자 우선순위란? 선택자 우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 것인지를 결정하는 방법입니다. 그 기준은 다음과 같습니다. 1. 점수가 높은 선언이 우선함 2. 점수가 같으면, 가장 마지막에 해석된(작성된) 선언이 우선함 선택자 점수 매기기 !important : 무한대 !important 를 속성 값 옆에 작성하시면 우선순위가 가장 높게 부여됩니다. div { color: red !important; } 인라인 선언 방식 : 1000점 인라인 선언 방식은 html 문서 내부에서 style 속성에 직접 스타일을 작성하는 방식인데요. 인라인 방식으로 작성하게되면 우선순위가 너무 높기 때문에 css에서 !important를 써주지 않는 이상 다른 ..