서론
5일차 프로그래머스 데브코스다. 오늘을 끝으로 HTML과 CSS의 기초는 끝난다. 실로 다이나믹한 학습 과정이다. 다만, 다음주에 바로 Javascript를 공부하는 것은 아니다. 크리스마스 주간&연말-연초와 겹치는 관계로 다음주는 쉰다. 뭘 공부해야 할까. 생각이 들기도 했는데. 또 고민해보면 지난 5일 동안 TIL을 쓰면서 넘겼던 부분이 몇 가지 있다. 그걸 써야겠다.
그리고 본격적인 학습에 들어가면 어려워질 자바스크립트 예습도 하는 것이 좋을 것 같다. 아니, 자바스크립트보다는 알고리즘 공부가 맞을지도 모르겠다. 어차피 자바스크립트를 어느 정도 쓸 줄 아니까, 기초나 자잘한 부분은 데브코스에서 배우고, 코드 운용인 알고리즘을 익히는 것이 맞으리라.
정리를 하면 생략하거나 부족했던 HTML/CSS의 보강, 자바스크립트로 알고리즘 문제 공부하기. 나쁘진 않다. 별 다른 압력 없이 공부는 조금 힘들 것 같기도 하지만, 그래도 하는 것이 맞을 것이다. 참고로 TIL는 쉬는 날에도 계속 올려야 할 것 같다. 괜히 일차를 빼먹으면 조금 불편한 감이 적잖을 것 같기 때문이다. 조금만 공부했어도 올리는 것이 정진을 위한 길이리라.
참, 방금 안 사실이 있는데. 프로그래머스 측에서 알려주길 TIL에는 학습 주제, 주요 메모 사항, 공부하며 어려웠던 내용이 들어가야 한다고 한다. 대충 주제와 메모 사항은 공부 내용을 적으면서 들어갔다고 치면... 어려운 내용은 뭐 나중에 사족에 따로 붙이던지 해야겠다.
이번 일차는 CSS 학습이다.
박스 모델(Box model)
모든 HTML 요소는 박스 형태로 이루어져 있다. 그리고 우린 이를 박스 모델이라고 부른다. 이러한 박스 모델을 이해하는 것은 레이아웃을 생성하거나, 서로 다른 요소를 정렬시켜주는 것에 큰 도움을 준다. 위의 이미지가 바로 박스 모델의 구조이다.
- 외부 여백(margin; 마진): 위의 연갈색. 가장 바깥에 있는 영역으로, 주변에 있는 요소와의 간격을 담당하는 영역이다. 눈에 안 보인다.
- 테두리(border; 보더): 위의 연두색. 내용과 패딩을 감싸는, 외부 여백과 내부 여백 사이에 있는 경계선 영역이다.
- 내부 여백(padding; 패딩): 위의 노랑색. 내용과 테두리 사이의 간격을 담당하는 영역이다. 눈 에 안 보인다.
- 내용(content; 콘텐츠): 위의 파란색. 위의 황갈색. 텍스트 및 이미지 등의 실 내용이 들어있는 영역이다.
박스 모델은 기본적으로 이러한 구조를 갖고 있다. F12를 눌러 개발자 도구를 둘러보다보면 한 번 정도는 보았을 형태이다. 그리고 이러한 박스 모델에는 2가지 종류가 있다. 바로 블록(Block)과 인라인(Inline)이다. 이전에 레벨 요소(level element)의 형태로 한 번 언급한 적이 있는데, 해당 종류는 다음과 같은 뜻을 갖고 있다.
- 블록(Block): 한 줄에 하나의 요소만 표시할 수 있음.
- address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1~h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video가 포함. - 인라인(Inline): 한 줄에 여러 개의 요소를 표시할 수 있음.
- a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var가 포함.
대체로 큰 영역 지정에 가까운 것들은 블록에, 자잘한 것이나 세부적인 것들은 인라인에 있다는 걸 알 수 있다. 이것만 알아도 블록-인라인 구별은 쉽게 할 수 있다.
크기(Size)
<span>
<p><h1>첫 번째 예제</h1></p>
</span>
<div>
<p><h1>두 번째 예제</h1></p>
</div>span{
background-color : red;
color : green;
width : 500px;
height : 200px;
}
div{
background-color : blue;
color : green;
width : 500px;
height : 200px;
}
width, height를 이용하여 가로-세로의 크기를 지정하는 속성이다.
이러한 가로, 세로 크기 지정은 오직 블록 요소에서만 사용할 수 있다. 위의 이미지처럼 다른 곳에 사용하면 제대로 작동하지 않는다.
width의 기본값은 무한대이기에 부모 요소나 뷰포트의 크기만큼의 값이 가로의 실질적인 길이가 된다. 반면 width는 해당 내용이 블록 요소에 담길 수 있는 최소값만큼만 할당한다.
참고로 px, em, % 단위 외에도 auto 값을 사용해 브라우저가 크기를 직접 계산 후 지정하게 할 수도 있다.
width: auto는 부모 요소의 크기만큼 블록 요소의 구역이 늘어난다. 즉, 부모가 가로로 무한대라면 무한대만큼 계속해서 블록 요소가 생겨난다.
반면 height: auto는 내부에 있는 콘텐츠(텍스트, 이미지 등)만큼의 위아래 크기만큼 블록 요소의 구역이 자동으로 줄어든다.
최대 크기(Max size)
<body>
<div class = "one">
<div class = "two">
<h1>본격적인 예제</h1>
</div>
</div>
</body>
.one{
background-color : red;
color : green;
width : 600px;
height : 450px;
}
.two{
background-color : blue;
color : green;
width : 1000px;
height : 1000px;
max-width : 30%;
max-height : 30%;
}
max-width, max-height는 최대 가로(최대 너비), 최대 세로(최대 높이)를 지정하는 속성이다.
이러한 가로, 세로 크기 지정은 오직 블록 요소에서만 사용할 수 있다.
이러한 max-width, max-height가 있는 한, 해당 값 이상으로 커지는 것은 불가능하다. 이를 통해 반응형 웹에서 필요 이상으로 요소가 커지는 것을 방지할 수 있다.
참고로 px, em, % 단위 외에도 auto 값을 사용해 브라우저가 크기를 직접 계산 후 지정하게 할 수도 있으며, 'auto' 값을 통해 브라우저가 크기를 조절하도록 만들 수도 있다.
최소 크기(Min size)
<body>
<div class = "one">
<div class = "two">
<h1>본격적인 예제</h1>
</div>
</div>
</body>
.one{
background-color : red;
color : green;
width : 600px;
height : 450px;
}
.two{
background-color : blue;
color : green;
width : 50px;
height : 50px;
min-width : 70%;
min-height : 70%;
}
min-width, min-height은 최소 가로(최소 너비), 최소 세로(최소 높이)를 지정하는 속성이다.
이러한 가로, 세로 크기 지정은 오직 블록 요소에서만 사용할 수 있다.
이러한 min-width, min-height가 있는 한, 해당 값 이하로 작아지는 것은 불가능하다. 이를 통해 반응형 웹에서 필요 이하로 요소가 작아지는 것을 방지할 수 있다.
참고로 px, em, % 단위 외에도 auto 값을 사용해 브라우저가 크기를 직접 계산 후 지정하게 할 수도 있으며, 'auto' 값을 통해 브라우저가 크기를 조절하도록 만들 수도 있다.
외부 여백(Margin)
<body>
<div class = "one">
<div class = "two">
<h1>본격적인 예제</h1>
</div>
</div>
<h1>---예제 아래 경계 즈음---</h1>
</body>.one{
background-color : red;
color : green;
width : 300px;
height : 200px;
margin-top: 40px;
margin-right: 1px;
margin-bottom: 30px;
margin-left: 70px;
}
.two{
background-color : blue;
color : green;
}
margin은 가장 바깥에 있는 여백, 외부 여백를 지정하는 속성이다. 음수(-) 사용이 가능하다.
margin은 블록 요소에서만 완전히 사용할 수 있다. 인라인 요소에서는 좌, 우에 한정해서만 적용 가능하다.
그걸 제외하면 기본적으로는 네 방향의 여백을 지정할 수 있다.
한쪽 방향 속성 값에 auto를 집어넣을 경우 반대편 쪽으로 쏠리게 된다. 반면 양쪽 모두에 집어넣을 경우 균형이 맞춰져서 가운데에 모이게 된다.
/* 축약형이 4개 있을 때 */
/* margin:TOP RIGHT BOTTOM LEFT; */
margin:1px 2px 3px 4px;
/* 위와 아래는 동일 */
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
/* 축약형이 3개 있을 때 */
/* margin:TOP RIGHT BOTTOM; */
margin: 1px 2px 3px;
/* 하지만 없는 left 부분은 right가 대신함. 위와 아래는 동일. */
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 2px;
/* 축약형이 2개 있을 때 */
/* margin:TOP RIGHT; */
margin: 1px 2px;
/* 하지만 없는 bottom&left 부분은 top&right가 대신함. 위와 아래는 동일. */
margin-top: 1px;
margin-right: 2px;
margin-bottom: 1px;
margin-left: 2px;
/* 축약형이 1개 있을 때 */
/* margin:ALL; */
margin: 1px;
/* 없는 부분이 전부 해당 값으로 통일. 위와 아래는 동일. */
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
그리고 margin을 선언하는 방법은 일반적인 속성을 이용하는 방법과 축약 표현을 이용하는 방법이 있다.
축약 표현을 이용할 경우. margin-top, margin-right, margin-bottom, margin-left 같은 것 대신, margin 하나만으로 모든 걸 제어할 수 있다. 마찬가지로 auto를 사용할 수 있다.
내부 여백(Padding)
<body>
<div class = "one">
<div class = "two">
<h1>본격적인 예제</h1>
</div>
</div>
<h1>---예제 아래 경계 즈음---</h1>
</body>.one{
background-color : red;
color : green;
width : 300px;
height : 200px;
}
.two{
background-color : blue;
color : green;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 90px;
}
padding은 가장 안쪽에 있는 여백, 내부 여백를 지정하는 속성이다.
padding은 블록 요소에서만 완전히 사용할 수 있다. 인라인 요소에서는 좌, 우에 한정해서만 적용 가능하다.
위의 이미지는 top에 의해 20px 내려오고, bottom에 의해 10px만큼 빨간 부분이 추가로 사라지고, left에 의해 90px만큼 오른쪽으로 콘텐츠 공간이 밀려나고, right에 의해 오른쪽으로 콘텐츠 공간이 밀려나면서 공간 부족으로 한 자가 아래로 내려왔다.
그걸 제외하면 기본적으로는 내부적인 네 방향의 여백을 지정할 수 있다. 참고로 padding에는 auto 속성이 존재하지 않는다.
/* 축약형이 4개 있을 때 */
/* padding:TOP RIGHT BOTTOM LEFT; */
padding:1px 2px 3px 4px;
/* 위와 아래는 동일 */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
/* 축약형이 3개 있을 때 */
/* padding:TOP RIGHT BOTTOM; */
padding: 1px 2px 3px;
/* 하지만 없는 left 부분은 right가 대신함. 위와 아래는 동일. */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 2px;
/* 축약형이 2개 있을 때 */
/* padding:TOP RIGHT; */
padding: 1px 2px;
/* 하지만 없는 bottom&left 부분은 top&right가 대신함. 위와 아래는 동일. */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
/* 축약형이 1개 있을 때 */
/* padding:ALL; */
padding: 1px;
/* 없는 부분이 전부 해당 값으로 통일. 위와 아래는 동일. */
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
그리고 padding을 선언하는 방법은 일반적인 속성을 이용하는 방법과 축약 표현을 이용하는 방법이 있다.
축약 표현을 이용할 경우. padding-top, padding-right, padding-bottom, padding-left 같은 것 대신, margin 하나만으로 모든 걸 제어할 수 있다.
여백 상쇄(Margin collapsing)
여백 상쇄는 마진 상쇄라고도 불린다. 굳이 마진이라고 하는 이유는 이 상쇄 문제는 구조적으로 패딩(내부 여백)에서 벌어질 수 없는 문제이기 때문이다. 즉, 외부 여백에서만 발생하는 특수한 문제이다.
여백 상쇄는 블록의 top 마진과 bottom 마진이 다양한 이유로 결합되는 현상이다. 정확하게는 상하 여백이 결합되다 못해 서로 겹쳐져서 한쪽이 상쇄되는 것이다. 즉, 상하 여백 중 하나가 큰 크기의 여백에 덮어져서 완전히 상쇄되는 것이다. 이러한 상쇄가 벌어질 경우 제일 큰 여백만이 문서 상에 남는다. (여백 크기가 동일하면 한쪽만 남는다.)
참고로 이 현상은 좌우 여백에서는 보이지 않는다. 오직 수직 여백, 위-아래의 여백에서만 보이는 현상이다. 또한, 상쇄된다고 해서 값 자체가 증발하는 건 아니다. 그저 사용자에게 안 보일 뿐이다.
해당 마진 상쇄가 벌어지는 주 시나리오는 총 3가지라고 할 수 있다.
인접한 형제 블록 박스 간 위-아래 마진이 겹쳤을 때
위에 언급한 내용처럼, 같은 단계(형제 관계)의 두 마진 값이 단순하게 겹쳤을 때이다.
이런 경우 그나마 큰 쪽으로 마진을 상쇄해서 한 쪽만을 남긴다.
부모와 자식 사이에서 마진이 나란히 겹칠 때
정확하게는 부모가 마진을 갖고 있고, 그 부모 아래에 있는 '첫 번째' 자식이 마진을 갖고 있을 때이다. 즉, 부모와 첫 자식이 별 다른 요소(텍스트나, 이미지 등) 없이 바로 붙어있을 경우 자식의 마진은 상쇄되어버린다.
이러한 현상을 해결하려면 텍스트나 이미지 등의 인라인 콘텐츠를 첫 자식으로 두거나, 패딩 혹은 테두리 같은 것으로 서로 떨어트려놓아야 한다. 그러나 그렇다고 해서 위쪽만 신경쓰면 안 되는 것이, 이 현상은 아래에서도 발생하기 때문이다.
빈 블록
마진 사이에 있는 블록에 별 다른 콘텐츠가 없는 경우, 블록은 높이 0을 자연스럽게 갖게 된다. 당연하지만 그러면 서로 떨어져있는 마진이 서로 붙는 모양새가 된다.
래도 블럭이 있는데, 어떻게 붙다고도 할 수 있다. 그러나 비어있고 높이 0이라는 건 패딩, 테두리, 인라인 콘텐츠 어느 하나 없다는 뜻으로 해석할 수 있다. 결국, 서로 붙게 된 두 마진은 합쳐지게 된다.
참고로 음수 마진(Negative Margins)이라는 것도 존재하는데, 이건 마진이 음수인 상태일 때 위와 같은 시나리오가 벌어졌을 때 일어나는 현상이다. 붙게 되는 마진이 양수 + 음수이면, 서로 합한 다음(당연히 한쪽이 음수이므로 실제론 빼기게 된다.) 해당 값을 양수로 바꾼다. 반면 음수 + 음수이면 다른 것들과 마찬가지로 더 낮은 음수(-5와 -10을 비교하면 -10을 선택)를 마진으로 삼는다. 양수 전환은 없다.
해결책
간단하다. 그냥 마진이 겹치지 못하게 가운데 뭘 넣어버리면 된다. 물론 빈 것을 넣으면 빈 블록 상쇄가 터질 수도 있으니, 형태를 가진 무언가여야 한다.
- 인접해야 하는 경우 해결책.
- 박스 내부에 Flex 속성 요소 사용.
- 박스 내부에 Grid 속성 요소 사용.
- 박스에 absolute position 사용.
- 인접 안 해도 되는 경우 해결책.
- 그냥 인라인 블록(텍스트, 이미지 등) 가져다 놓기.
- padding이나 border 같은 것을 잘 적용해서 분리하기.
즉, 제대로 경계만 구성해놓는다면 문제될 것은 없다. 그러니 빠른 개발을 위해 빈 박스로 공간을 구분하거나, 추후 내부에 무언가를 추가하고자 빈 박스를 만들어놓는 일은 없게 하자.
테두리(Border)
<div class = "one">
<div>
<h1>본격적인 예제</h1>
</div>
</div>.one{
background-color : red;
border-width : 10px;
border-style : double;
border-color : yellow;
}
border은 테두리를 만드는 속성이다.
각 방향마다의 선을 정할 수 있다. 따로 정할 수도 있고, 일괄적으로 정할 수도 있다. 이러한 테두리는 배경보다 우선시되어 표시되는 특성이 있다.
테두리는 border-[속성]을 적어서 별도의 속성을 알아보기 쉽게 적을 수도 있다. 각 속성은 특수한 값들을 각자 지니고 있다. 해당 속성들은 아래와 같다.
- border-width: 테두리의 두께를 정한다.
[medium(기본), thick, thin, length(px, em, % 등 단위)] - border-style: 테두리의 형태를 정한다. (기본 선, 실선, 이중 선 등등)
[none(기본), hidden, dotted, dashed, solid, double, groove, ridge | inset, outset]
참고로 none이 기본값이므로, 선이라도 그어놓으려면 solid를 선언해둬야 한다. width와 color만 선언해두면 테두리가 생겨나지 않는다. - border-color: 테두리의 색을 정한다.
[키워드: red, blue, green...]
[RGB(함수형): rgb(255, 0, 0), rgb(255, 0, 255)...]
[RGB(16진수): #0000ff, #ff0000...]
이러한 속성들을 통해 알아보기 쉽게 테두리를 설정할 수 있다. 물론 'border'만 사용하는 축약형 또한 존재한다.
축약형은 'border: border-width border-style border-color;'와 같은 규칙을 갖는다. 각 속성되는 부분에는 위의 것과 동일하게 원하는 값을 집어넣으면 된다.
박스 크기(Box sizing)
box-sizing은 박스 크기를 어떤 것을 기준으로 계산할지 정하는 속성이다. 더 정확하게는 너비와 높이를 계산하는 방법을 따로 설정하는 것이라 보면 된다. 해당 box-sizing에 들어가는 속성은 크게 2가지이다.
border-box
<div class = "BorderBox">
<h1>본격적인 예제 - border box</h1>
</div>.BorderBox{
background-color : blue;
border : 10px solid yellow;
width: 300px;
height: 300px;
margin: 70px;
padding: 30px;
box-sizing: border-box;
}
border-box에서는 파란색 도형을 만들 때 설정한 width와 height 값이 단순히 콘텐츠(content) 부분만을 뜻하지 않는다. 300px라고 너비와 높이를 설정했으면 해당 너비와 높이에 테두리(border)와 내부 여백(padding)의 값도 포함된다.
이는 위의 이미지를 보면 알 수 있다. 개발자 도구를 통해 얻은 정보인데, 푸른색 콘텐츠가 220x200이고, 내부 여백이 30, 테두리가 10이라고 되어 있다. 다만, 누군가는 그러면 220 + 30 + 10 = 260px가 아니냐고 할 수도 있다. 전혀 아니다.
border-box를 계산할 때는 한쪽만 보는 것이 아닌 다른쪽도 보아야 한다. 오른쪽 외에도 왼쪽 값도 합산해야 한다는 소리다.(혹은 상하 값 합산) 그렇기에 220 + (10+10) + (30+30) = 300px라는 방식으로 계산을 해야 한다.
즉, border-box는 내부적인 값들은 전부 크기에 포함시키는 것이라 할 수 있다. 물론 외부 여백(margin)은 해당 값에 포함시키지 않는다. 이런저런 레이아웃 제작시 외부 여백을 신경 써야 하긴 하겠지만, 적어도 border-box에는 margin이 포함되지 않는 걸 염두에 두어야 한다.
border-box : width 와 height 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요.
- https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing
이러한 border-box의 외부 여백(바깥 여백) 제외는 MDN에도 명시되어있다.
content-box
<div class = "ContentBox">
<h1>본격적인 예제 - content box</h1>
</div>.ContentBox{
background-color : red;
border : 10px solid yellow;
width: 300px;
height: 300px;
margin: 70px;
padding: 30px;
box-sizing: content-box;
}
content-box에서는 붉은색 도형을 만들 때 설정한 width와 height 값이 콘텐츠 부분만을 뜻한다. 즉, padding, border, margin은 전부 따로 계산이 이뤄진다. 사실 그래서 그런지 이전 푸른색 도형보다 조금 더 크기까지 하다.
이는 위의 이미지에 아주 잘 드러나있다. 콘텐츠 300px, 내부 여백 좌우(혹은 상하) 30+30=60px, 테두리 좌우(혹은 상하) 10 + 10 = 20px. 이를 전부 합치면 380px가 나온다.
CSS의 기본 설정값은 content-box이다. 그렇기에 초기 설정에서 width, height 뿐만 아니라 border, padding, margin을 설정 시 예상치보다 커지는 일이 발생할 수도 있다. 따라서 내부 여백과 테두리를 포함하는 관점에서는 border-box 속성을 사용하는 것이 맞다.
대충 찾아본 바에 따르면 border-box가 보다 더 편하게 취급되는 것 같았다. 그만큼 도형이 작아질 수도 있지만, 일단 그건 추가로 합산을 하면 되는 부분이니 말이다.
초과(Overflow)
overflow는 콘텐츠가 너무 커서 요소 내에 전부 보여줄 수 없을 때, 해당 거대 콘텐츠를 어떻게 보여줄 것인지를 지정하는 속성이다. 기본적으로 개발을 진행하다보면 내용물이 너무 많아질 때가 종종 있는데, 그걸 대비하여 만들어둔 속성 같았다.
초과의 값으로는 visible, hidden, scroll, clip, auto이 있다. 여기서 clip을 제외한 나머지를 설명하도록 하겠다. (clip는 hidden과 비슷한데, 사용자의 눈에 보이는 범위를 지정해서 보여줄 수 있다.)
visible
<div class = "overflow_test">
지방자치단체는 주민의 복리에 관한 사무를 처리하고 재산을 관리하며, 법령의 범위안에서 자치에 관한 규정을 제정할 수 있다. 재의의 요구가 있을 때에는 국회는 재의에 붙이고, 재적의원과반수의 출석과 출석의원 3분의 2 이상의 찬성으로 전과 같은 의결을 하면 그 법률안은 법률로서 확정된다.
</div>.overflow_test{
background-color : red;
overflow : visible;
border : solid 5px green;
height : 150px;
width : 200px;
}
내용물이 너무 크면 시원하게 밖으로 배출해버리는 값이다. 당연하게도 밖으로 튀어나간 값은 다른 내용과 열심히 겹치게 된다. 참고로 초과 속성의 기본 값은 visible이다.
hidden
<div class = "overflow_test">
지방자치단체는 주민의 복리에 관한 사무를 처리하고 재산을 관리하며, 법령의 범위안에서 자치에 관한 규정을 제정할 수 있다. 재의의 요구가 있을 때에는 국회는 재의에 붙이고, 재적의원과반수의 출석과 출석의원 3분의 2 이상의 찬성으로 전과 같은 의결을 하면 그 법률안은 법률로서 확정된다.
</div>.overflow_test{
background-color : red;
overflow : hidden;
border : solid 5px green;
height : 150px;
width : 200px;
}
콘텐츠를 안쪽 여백 상자에 맞춰서 잘라낸다. offsetLeft 등의 속성 설정을 이용하면 스크롤 기능을 따로 구현할 수는 있다. 다만 오히려 이러한 잘림 현상을 이용하여 특정 디자인을 구현할 수도 있다.
scroll
<div class = "overflow_test">
지방자치단체는 주민의 복리에 관한 사무를 처리하고 재산을 관리하며, 법령의 범위안에서 자치에 관한 규정을 제정할 수 있다. 재의의 요구가 있을 때에는 국회는 재의에 붙이고, 재적의원과반수의 출석과 출석의원 3분의 2 이상의 찬성으로 전과 같은 의결을 하면 그 법률안은 법률로서 확정된다.
</div>.overflow_test{
background-color : red;
overflow : scroll;
border : solid 5px green;
height : 150px;
width : 200px;
}
잘린 내용 만큼 스크롤을 달아준다.
다만, 이러한 스크롤이 아래와 왼쪽으로 달린 것이 불편하게 느껴질 수도 있다.
<div class = "overflow_test">
지방자치단체는 주민의 복리에 관한 사무를 처리하고 재산을 관리하며, 법령의 범위안에서 자치에 관한 규정을 제정할 수 있다. 재의의 요구가 있을 때에는 국회는 재의에 붙이고, 재적의원과반수의 출석과 출석의원 3분의 2 이상의 찬성으로 전과 같은 의결을 하면 그 법률안은 법률로서 확정된다.
</div>.overflow_test{
background-color : red;
overflow-y : scroll;
border : solid 5px green;
height : 150px;
width : 200px;
}
이때는 'overflow-y' 혹은 'overflow-x'라는 것을 통해 원하는 것만 달아줄 수 있다. 물론 텍스트 내용의 경우 width의 끝 즈음이 될 때마다 자동 줄바꿈을 하므로, overflow-x는 좌우로 스크롤링이 안 될 수도 있다.
auto
<div class = "overflow_test">
지방자치단체는 주민의 복리에 관한 사무를 처리하고 재산을 관리하며, 법령의 범위안에서 자치에 관한 규정을 제정할 수 있다. 재의의 요구가 있을 때에는 국회는 재의에 붙이고, 재적의원과반수의 출석과 출석의원 3분의 2 이상의 찬성으로 전과 같은 의결을 하면 그 법률안은 법률로서 확정된다.
</div>.overflow_test{
background-color : red;
overflow : auto;
border : solid 5px green;
height : 150px;
width : 200px;
}
콘텐츠가 박스를 초과할 경우 스크롤바가 자동으로 생겨난다. 가변적인 요소이며, 가로-세로 필요에 따라서 자동으로 생성된다. 당연하지만, 콘텐츠가 적어서 초과하지 않을 경우 스크롤바는 생겨나지 않는다.
투명도(opacity)
<div>
<img src="cat_img.jpg" class="cat1">
</div>
<div>
<img src="cat_img.jpg" class="cat2">
</div>.cat1 {
width: 300px;
border : solid 5px green;
}
.cat2 {
width: 300px;
border : solid 5px green;
opacity: 0.4;
}
opacity는 말 그대로 요소의 투명도를 결정하는 속성이다. 'opacity: 값'으로 사용 가능하며, 값에는 '0~1.0'까지의 값이 들어갈 수 있다. 1에 가까울수록 투명도가 약하고(선명함), 0에 가까울수록 투명도가 강해진다(흐릿함). 이러한 투명 속성은 단순히 희미해지는 것이 아닌, 뒤에 있는 요소가 희미하게 보이도록 투명해지는 것이다.
또한, opacity는 설정시 그 자식요소 또한 덩달아 투명해진다. 그러나 상속이 가능한 것은 아니다.
참고로 투명도를 이걸로만 쓸 수 있는 건 아니다. 기존의 색 설정시 rgb(255, 255, 255) 같은 걸 사용하기도 하는데. 이걸 rgb가 아닌 rgba를 사용하는 것이다. 이런 경우 rgba(255, 255, 255, 0.4)처럼, 마지막 값에 투명도를 설정할 수 있다. 여기서 a는 Alpha(알파값, 투명도)를 뜻한다.
사족
그리고 여기서 알아볼 사람들은 알아봐겠지만, 이번 일차는 실제 데브코스의 5일차 내용을 전부 담고 있지 않다. 표시 유형과 레이아웃 항목이 있으나... 문제는 내가 지금 그 부분을 덜 정리했다는 점이다. 그래도 TIL이니 함께 올릴 생각이었으나, 정작 오늘 내로 다 쓰는 건 아무래도 힘들 것 같다.
그런 관계로 본래 데브코스의 5일차(CSS 2)는 2일에 걸쳐서 나눠질 예정이다. 오늘 분량인 5일차 pt.1는 12/22 중으로 작성이 완료된 부분, 다음 화인 pt.2는 12/23 중으로 작성이 완료된 부분이다. 물론 다듬다보면 다음 화는 12/24 즈음으로 올라오겠지만 말이다. 아무튼 지금 열심히 pt.2 분량을 쓰고 있으니, 나머지 사족은 그곳에 적도록 하겠다... 였는데 개인 사정으로 아무래도 미뤄질 것 같다.
'💻 종합 개발 주제 > 📚 웹앱 데브코스' 카테고리의 다른 글
| 6일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.04 |
|---|---|
| 5일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.03 |
| 4일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.22 |
| 4일차 데브코스 pt.1 - 클라우딩 어플리케이션 엔지니어링 TIL (0) | 2023.12.21 |
| 3일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2023.12.21 |
