🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [23]일차
🚀23일차에는 CSS의 선택자를 배웠는데, 개인적으로는 선택자를 배우면서 좀 어려움을 많이 느꼈다.
선택자 옵션 자체가 많은 것 같기도했고, >, ~, nth-child 등 비슷하면서도 구분하기 좀 어려운 선택자도 많다고 느껴졌다.
이전에 공부할때도 가장 중요하다고 느꼈던 position 옵션도 여전히 어려운 점이 많았다.
단순히 그 태그의 속성만 신경쓰는 것이 아닌 부모 태그의 position 옵션도 고려하여 작성해야한다는 것이다.
이러한 점때문에 오늘 회고를 진행하면서 CSS의 선택자와 position 옵션에 좀 더 친숙해져야겠다고 느꼈다.
자바스크립트의 서버
- 자바스크립트의 lite-server : 웹서버의 역할로 단순히 요청에 응답을 보내주는 역할만 하므로 정적인 서버
- 자바의 servlet : 요청을 동적으로 받아서 처리하는 하는 웹어플리케이션 프로그래밍 기술이다.
하지만 servlet은 웹서버가 동작을 못시키기 때문에 이를 도와줄 웹 어플리케이션 "서버"가 있어야한다.
➡️ 이를 도와주는 Apache, Apache Tomcat 등이 있다.
자바스크립트 라이브러리 - 제이쿼리 jQuery
- 자바스크립트에 다양한 플러그인과 확장기능을 제공하여 웹 개발을 더욱 효율적으로 도와줌
- 자바스크립트의 이벤트기능 구현 시 호환성 문제를 해결하는 라이브러리
- ❓제이쿼리 사용의 이점 :
➡️이벤트 등 웹 페이지의 동작을 조작할때 브라우저의 영향을 받지 않고 원하는 기능 제공
➡️브라우저 버전에 따라 작동하지 않는 코드도 제이쿼리로 변경하여 브라우저에 문제없이 사용 가능 - ❓등장배경 :
➡️코드가 브라우저의 영향을 받아 작동하지 못하는 문제를 해결하기 위해 개발됨
ex. IE(Internet Explorer)가 대표적으로 호환성문제를 많이 일으켰음
제이쿼리는 "크로스 브라우징" 기능으로 이 문제를 해결 - ❓크로스 브라우징 :
➡️ 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오게 하는 관련 API를 제공함 - 제이쿼리는 DOM(Document Object Model) 구조 탐색이 뛰어남
- ❓DOM (Document Object Model)
➡️문서 객체 모델로 트리 자료구조의 형태를 가져 하위로 펼쳐지면서 내려가는 구조
➡️서론 → 본론 → 결론 처럼 순서대로 작성된 코드에서 원하는 위치의 값을 가져오기가 편리해짐 - 단점 : 순수 자바 스크립트를 이용해 구현한 코드보다 속도가 느림
➡️해결을 위해서는 동적 이벤트에선 적은 양 코드, class선택자보다는 id선택자 활용
자바의 서버
- 자바의 정적인 서버 = Apache (아파치 재단의 HTTP서버로, 웹 서버 전용 기능을 제공)
❓Apache가 정적인 서버인 이유 : ➡️HTTP 서버이기때문에 상태유지를 해주지 않는다. - 자바의 동적인 서버 = Apache Tomcat (아파치 재단의 오픈소스 WAS(Web Application Server)
➡️자바 Sevlet과 JSP가 실행할 수 있는 환경을 제공함 - servlet : 동적 웹 페이지를 만들때 사용되는 자바 기반의 웹 애플리케이션 프로그래밍 기술
❓Apache 와 Tomcat ?
➡️Apache Tomcat은 웹 서버와 연동하여 실행할 수 있는 자바 환경을 제공
즉 Apache는 웹서버의 역할을, Tomcat은 웹 어플리케이션 역할
CSS 선택자
후손 선택자 (X Y)
- 특정 태그 뒤에 특정 태그를 함께 사용한다 (띄어쓰기로 구분)
- X태그 안에 있는 모든 Y태그들에 스타일을 적용한다.
<style>
div p {
color: red;
}
</style>
<body>
<div id="container">
<p>[1] My paragraph here.</p>
<p>[2] My paragraph here.</p>
<ul>
<p>[3] My paragraph here.</p>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
</div>
</body>- div p :
div태그 안에 있는 모든 후손<p>태그들에 스타일을 적용
➡️My Paragraph here - [1], [2], [3] 에 모두 빨간 배경이 적용
자식선택자 (X > Y)
- 후손선택자와의 차이는 (자손들을 모두 선택할 것이냐 ↔️ 자식만 선택할 것이냐)의 차이
- X태그 안 바로 밑에 있는 자식태그에만 스타일을 적용한다.
- 위의 코드에서 추가된 코드로 실습진행
<style>
div p {
color: red;
}
div > p {
color: rgb(53, 53, 191);
}
</style>- div > p 스타일을 추가하여 자식선택자 결과를 확인해본다.
- 바로 밑의 <p>태그만 파란색으로 적용된 것을 알 수 있다.
➡️바로 밑 <p>태그의 자식 <p>태그까지는 적용이 되지 않았다.
❓후손 선택자 (X Y)와 자식 선택자 (X > Y)의 차이점
| 구분 | X Y | X > Y |
| 선택 범위 | X태그 내부의 모든 Y태그들 | X태그의 바로 아래있는 Y태그 |
| 제한 범위 | 제한없이 모든 후손태그들 선택 | 직계 자식만 선택 |
| CSS 스타일 적용 | 모든 후손태그들에 스타일 적용 | 직계 자식만 스타일 적용 |
인접 형제 선택자 (X + Y)
- 같은부모태그 X를 가지며 부모태그 X 바로 뒤의 Y태그 위치
일반 형제 선택자 (X ~ Y)
- 같은부모태그 X를 가지며 부모태그 X 뒤의 Y태그
- X + Y와 유사하지만 제약이 덜하다.
➡️X + Y선택자는 바로 뒤에 오는 첫번째 요소만을 선택하지만, X ~ Y선택자는 X아래에있는 모든 Y요소를 선택
▶️실습 - X + Y선택자와 X ~ Y선택자
<style>
h2 + p {
/*바로 밑에만*/
background-color: rgb(179, 248, 119);
}
h3 ~ i {
/*밑 모두 포함*/
background-color: rgb(185, 135, 233);
}
</style>
<body>
<h2>인접 형제 선택자 X + Y</h2>
<p>샘플데이터입니다.</p>
<p>샘플데이터입니다.</p>
<p>샘플데이터입니다.</p>
<h3>일반 형제 선택자 X ~ Y</h3>
<i>샘플데이터입니다.</i>
<br />
<i>샘플데이터입니다.</i>
<br />
<i>샘플데이터입니다.</i>
</body>
X:visited 와 X:link 선택자
- X:visited
가상클래스로 활용 ➡️클릭했거나, 방문했던 페이지를 상태변화시킴 - X:link
➡️ 사용자가 해당 링크를 아직 한 번도 클릭하지 않았을 때 사용 - X:active
➡️클릭하고 있는 상태, color를 넣어주면 클릭하고 있을때의 색깔이 바뀔 것 - X:hover
➡️마우스가 올라갈때의 상태, color를 넣어주면 마우스를 올렸을때 색깔이 바뀔 것 (=사용자 동작 가상클래스)
CSS 선택자 - 속성 선택자
X[title]
- title 속성이 있는 앵커 태그만 선택한다.
<a href="#" title="Some title"> Attributes Selector </a> <!--속성선택자-->
<a href="#"> none </a>
a[title]{
color: green;
}
- a태그의 속성 중 title 속성을 가진 "Attributes Selector"를 선택
- a태그의 none은 title 속성을 가지지 않으므로 선택되지 않는다.
- ex. p[class] : p태그 중에 class라는 속성을 가진 것을 선택
ex. li[id] : li태그 중에 id라는 속성을 가진 것을 선택
X[href="속성값"]
- 속성값과 일치하는 href속성을 선택
<style>
a[href="http://www.naver.com"]
{
color: #ff0000;
}
</style>
<!-- ----------------- -->
<p>
<a href="http://www.google.com">Google</a>
</p>
<p>
<a href="http://www.naver.com">Naver</a>
</p>
- 구체적인 url인 www.naver.com에 일치하는 href 속성 값만 스타일을 적용
- style태그에서 정의된 (www.naver.com) 에 해당하는 url은 밑의 Naver이므로 빨간색이 적용
X[href*=”naver”]
- href 속성값 중 naver.com, blog.naver.com, naverplus.com
➡️naver가 붙은 href 값을 모두 찾아 스타일을 적용
X[href^=”http”]
- href 속성값이 http로 시작하는 값을 모두 찾아 스타일을 적용
X[href$=”.com”]
- href 속성 값이 .com으로 끝나는 값을 모두 찾아 스타일을 적용
X[data-*="속성값"]
- ex. a[data-filetype=”image”] :
➡️a태그의 data-filetype 속성 중에 “image”속성 값을 가지는 태그를 선택해서 스타일을 적용하는 것
<p>
<a
href="http://d2o0t5hpnwv4c1.cloudfront.net/817_rubyNewbies1/preivew.png"
data-filetype="image">PNG Image</a>
</p>
<p>
<a href="#">adipisicing</a> elit, sed do eiusmod tempor.
</p>
<p>
<a href="http://net.tutsplus.com">Nettuts+</a>
<a href="http://d2o0t5hpnwv4c1.cloudfront.net/839_git/preview.jpg"
data-filetype="image"> Getting Good with Git</a>
</p>
- a태그 중에 data-filetype속성의 속성값이 "image"인 태그들, PNG Image와 Getting Good with Git에 스타일 적용
X[속성~="속성값"]
- 속성이 특정 속성 값을 단어로 포함하는 태그를 선택
- ex. a[data-info~=”image”] :
<a href="path/to/image.jpg" data-info="external image"> Click Me. </a>- ~ 속성 선택자 방식으로 data-info에 image가 포함되므로 이 Click Me를 선택하여 스타일을 적용하게 된다.
X:checked
- input[type=radio]:checked :
➡️이 가상클래스는 라디오버튼, 체크박스 처럼 체크가 되는 사용자 인터페이스 요소를 조작하게된다.
X:before와 X:after
- 이 가상클래스는 선택된요소 주변에 콘텐츠를 “새롭게 생성”한다.
<style>
.exciting-text::before {
content: " 흥미진진! ->";
color: green;
}
.boring-text::after {
content: " <- 먼지풀풀";
color: red;
}
</style>
X:not
- ex. div:not(#container) ➡️id가 container인 div만 뺴고 스타일을 적용
- negation 가상 클래스로, 모든 div중에 특정 id값을 가진 div만 빼고싶을 경우 유용
- ex. *:not(p)
➡️ p태그를 제외한 모든 태그에 적용하는 이와 같은 코드는 지양해야함.
X::가상요소
- :: 를 두개 사용한다.
- p::first-line : p태그의 첫번째 줄 요소에 스타일을 적용한다.
- p::first-letter : p태그의 첫번째 글자에 스타일을 적용한다.
- 신문처럼 글의 첫 글자를 스타일로 꾸밀때 자주 사용
X:nth-child(n)
- ex. li:nth-child(3) :
➡️변숫값을 정수로 받고 (0부터 시작하지않으므로) 이 구문은 3번째 항목을 대상으로 한다.
즉 li태그들 중 3번째 값마다 특정 스타일을 적용
<style>
div p:nth-child(1) {color: blue;}
div p:nth-child(2) {color: red;}
div p:nth-child(3) {color: green;}
div p:nth-child(4) {color: purple;}
</style>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
- 각 p태그에 id 선택자나 class 선택자로 스타일을 일일이 지정하지 않고
nth-child를 통해서 순서에 맞게 스타일을 적용이 가능하다.
X:nth-of-type(n)
- ex. ul:nth-of-type(3) :
➡️위의 X:nth-child(n) 선택자처럼 자식으로 선택하지 않고 type으로 선택하는 경우
ul태그의 3번째 ul태그를 꾸며주게된다.
<body>
<div id="container">
<ul>
<li> List Item <!-- 1번째 -->
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li> <!-- 2번째 -->
</ul>
<ul>
<li>
<a href="#"> Anchor Tag </a>
</li>
</ul>
<ul>
<li> List Items </li> <!-- 3번째 -->
</ul>
</body>
- 3번째 <ul>태그의 <li>들만 꾸며진것을 확인할 수 있다.
X:nth-last-of-type(n)
- ex. span:nth-last-of-type(2) :
➡️일관성을 유지할 수 있는 기능으로 span 태그들 중 끝 span태그를 기준으로 끝에서 두번째 요소를 스타일 적용
<div>
<span>This is a span.</span> <!--1번째 span태그-->
<span>This is another span.</span> <!--2번째 span태그-->
<em>This is emphasized.</em>
<span>Wow, this span gets limed!!!</span> <!--3번째 span태그 (끝에서 2번째 기준이됨)-->
<del>This is struck through.</del>
<span>Here is one last span.</span> <!--4번째 span태그-->
</div>
- 끝에서 두번째인 3번째 span태그가 스타일이 적용되었다.
X:first-child 와 X:last-child
- X:first-child : 부모 요소의 첫번째 자식만을 대상으로 삼는다.
- X:last-child : 부모 요소의 마지막 자식만을 대상으로 삼는다.
- 목록의 맨 처음과 맨 나중 항목의 스타일을 적용시킬때 흔히 사용한다.
- List Item의 맨 위와 맨 아래에는 빨간줄이 적용되지 않았는데
li:first-child { border-top : none; } 로 설정
li:last-child { border-bottom : none;} 처럼 설정한 결과이다. - 이렇게 맨 위와 맨 아래의 스타일을 적용하고자할때 주로 사용한다.
CSS - 크기 단위
- 픽셀(px) : 고정 크기 (글자의 크기들에 주로 사용)이기때문에 픽셀을 정해놓고 사용하면
다른 기기의 브라우저에서는 고정크기로 보여 불편할 것이다. - em : 배수 단위의 크기를 나타낸다. 상대적인 의미로 배수를 매긴다.
(ex.부모요소의 폰트크기를 기준으로 내 폰트크기를 상대적인 배수로 지정) (ex. 1.0em, 1.5em, 2.0em…) - rem : em단위와 달리 부모요소의 폰트크기를 신경쓰지 않고 작용한다.
- % : 가변 크기, ex. 200%인 경우 2.0em과 비슷한 결과를 가지기도 한다.
- 다양한 기기에서 잘 보여지게하기 위해 픽셀보다는 em이나 % 사용을 권장
❓em과 rem의 비교
➡️이 둘은 기준점을 토대로 배수가 늘어난다.
하지만 em은 상위 부모가 기준점, rem (=root em)의 기준점은 무조건 root태그이다.
즉 rem 단위는 html태그가 기준이 되어 루트 글꼴크기에 비례하여 상대적으로 바뀐다.
(대부분 1rem은 기본 크기 값 16px을 의미)
<style>
div p:nth-child(1) {
font-size: 50px;
color: blue;
}
div p:nth-child(2) {
font-size: 2em;
color: red;
}
div p:nth-child(3) {
font-size: 200%;
color: green;
}
div p:nth-child(4) {
font-size: 5em;
color: purple;
}
</style>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
- 첫 글자는 50px, 두번째는 2배 크기, 세번째 또한 200%이므로 2배크기, 네번째는 5배 크기의 폰트
<style>
body{ font-size:20px; }
</style>
- 여기서태그의 부모태그인 body태그에 font-size를 20px로 지정하게되면
- 이 body의 20px을 기준으로 <div>태그의 em이나 백분율에 따라 폰트 크기가 달라질 것이다.
(body의 폰트 기본값은 12px)
<style>
body { font-size: 20px;}
div{font-size :5px; }
</style>- 이렇게 <div>태그의 폰트사이즈를 추가하게되면 <p>태그들은 <div>태그의 자식들이기때문에
body 안의 div태그 안 모든 요소들은 5px을 가지게된다. - 별개로 body 안의 다른 태그들은 20px을 가지게된다.
- 정리하자면 p태그는 우선순위로 바로 위 부모인 <div>태그의 5px이 적용된다.
CSS - 색상 단위
- #000000 : HEX코드 단위
- rgb(red, green, blue)
- rgba(red, green, blue, alpha)
- hsl(hue(색조), saturation(채도), lightness(밝기))
- hsla(hue, saturation, lightness, alpha)
CSS - 박스 관련 속성
박스 사이징 box-sizing
- 위 그림을 기준으로
- box-sizing: content-box
➡️글자만 적용하는 박스 (기본값) - box-sizing : border-box
➡️글자 + padding + border까지를 한 박스로 적용하는 박스
➡️ex. border-box 스타일에 width:100px을 적용하게되면
100px안에 padding + border값도 포함이 되어야하기때문에 content박스는 그만큼 크기가 줄어든다.
테두리 border 옵션
- 테두리 속성을 조절한다.
- border-width : 테두리의 두께 (thick, medium, thin으로 줄 수도 있다)
- border-style : 테두리 속성 (border-bottom-style 처럼 특정 위치에만 적용할 수도 있다.)
- border-radius : 테두리의 곡선을 의미 (커질수록 둥글어지는 모서리)
CSS - 배경 관련 속성
background-image
- CSS3 이전에는 배경이미지를 1개만 적용할 수 있었지만 CSS3부터 여러 장 적용이 가능
- 여러 장 적용 시 여러 개의 이미지가 층을 이루어 출력 (=이미지가 겹쳐서 출력됨)
ex. 이를 활용하여 배경이미지와 배경에 어울리는 이미지가 함께 보여지도록 만들 수도 있다.
<body>
background-image : url('a.png'), url('b.png');
background-size: 100%, 200%;
</body>
- size또한 , (쉼표)를 통해 각 크기를 지정해줄 수도 있다.
background-attachment
- 이미지 여러 장사용 시 여러 개의 attachment를 지정가능
➡️background-attachment : local, scroll; - attachment 속성 :
scroll : 배경 이미지와 콘텐츠를 표현하는 기본 값
fixed : 배경이미지를 고정하고, 콘텐츠만 움직임
local: 배경이미지와 콘텐츠가 함께 움직임
background-position
- background-position: 0px 50%;
➡️배경 이미지를 어디에 둘 것인지 설정가능
CSS - 폰트 font 속성
- font-size : 글자의 크기를 지정 (h1태그의 기본크기 32px, p태그의 기본크기 16px)
- font-family : 폰트를 지정하는 속성
➡️font-family : ‘Times New Roman’; - 폰트에 공백있는 것은 따옴표 안에 묶어줌
➡️font-family : Aria; - 공백이 없으면 그냥 써준다. - font-style: 글꼴 스타일을 지정 ➡️normal, italic, oblique, inherit
- font-weight : 폰트의 기울기나 두께를 조정하는 속성
➡️일반 폰트는 두께가 400, 두꺼운 폰트는 700 normal, bold, 100~900, inherit - text-align : 텍스트 정렬
- line-height : 글자의 높이
- text-decoration : 밑줄 속성
CSS - 위치 position 속성
- 절대 위치 좌표 (x, y좌표 설정)
- 상대 위치 좌표 (요소를 입력한 순서로 상대적 위치 지정)
position 속성에 static, relative키워드 등 사용 (기본 값은 static) - static : 태그가 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 맞게 배치
- relative : static키워드로 초기 위치가 지정된 상태에서 “상하좌우”이동 가능
- absolute : 절대 위치 좌표를 설정
- fixed : 화면을 기준으로 절대 위치 좌표를 설정
▶️실습 - position:static과 position:relative 비교
<style>
section div {
width: 300px;
height: 100px;
border: 3px solid black;
margin: 10px;
display: inline-block;
}
.box1 {
background-color: rgb(91, 226, 172);
}
.box2 {
background-color: rgb(215, 118, 228);
top: 150px; /*위에서부터 150px*/
right: 200px; /*오른쪽에서부터 200px*/
/*하지만 position : static이 기본값으로 설정되어서 적용이 되지 않음*/
position: relative; /*relative로 바꿔주어야 본인 위치를 기준으로 이동시킴*/
}
</style>
<body>
<section>
<div class="box1"></div>
<div class="box2"></div>
</section>
</body>
- position : relative 설정으로 본인이 원하는 위치로 이동시킬 수 있다.
🚀실습 - 박스 추가 후 투명도로 위치 비교
.box3 {
background-color: rgb(56, 117, 170);
width: 100px;
height: 300px;
top: 250px;
right: 400px;
opacity: 0.5;
position: relative;
}
▶️실습 - 부모태그 position:relative + 자식태그 position:absolute
- 절대적인 위치에 둘 수 있다.
- 부모를 기준으로 이동한다.
그 부모를 기준으로 절대적으로 움직이므로, 일반적으로 자식 태그 (position:absolute)를 사용할 경우
기준이 될 부모 태그는 (position:relative)를 사용하여 원하는 위치를 지정한다.
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.box {
position: absolute;
width: 50px;
height: 50px;
background: #0094ff;
}
- 부모 wrap이 relative를 가지고, 자식 box가 absolute를 가지는 경우 기준점이 상위부모 - div(wrap) 안에 여러개의 div(box1~5)가 absolute를 가지면서 box들은 wrap을 기준으로 위치하게 된다.
▶️실습 - 부모태그의 위치속성없이 자식태그만 position:absolute
.box {
position: absolute;
width: 50px;
height: 50px;
background: #0094ff;
}
- absolute를 설정하게되면 wrap의 relative를 없앴을 경우 루트 태그인 html을 기준으로 위치하므로
➡️ wrap을 벗어나 브라우저를 기준으로 위치하게 된다.
🚀정리하자면
➡️부모 태그안에서의 상대적 위치를 지정하고 싶을때는 relative
➡️부모 태그와 상관없이 절대적인 위치 (브라우저 기준)를 지정하고 싶을때는 absolute
position : sticky
- 스크롤 영역을 기준으로 위치하게되므로 fixed와는 다른 결과를 가진다.
- 만약 div안에 sticky박스가 위치하게되면 이 sticky박스는 브라우저에서 스크롤을 내릴때 이동되어오다가
div박스의 끝지점에 도달하면 스크롤을 내려도 더 이상 이동되지 않고 div안에 귀속이 되는 것을 볼 수 있다.
position : fixed
- 브라우저의 스크롤에 상관없이 항상 같은 자리에 위치한다.
- 위의 sticky와 달리 스크롤을 많이 내려서 div박스를 벗어나도
스크롤을 내리는 화면과 함께 계속 따라오며 위치가 이동된다.
z-index 속성
🚀실습 : 클래스 여러 개 적용
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: blue;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
- 이처럼 class안에 box red 처럼 띄어쓰기를 통해 클래스를 여러개 적용할 수 있다.
▶️실습 : z-index 사용으로 우선순위 부여
- 겹쳐진 세 개의 사각형이 있다고 가정했을때
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.red {
background-color: rgb(138, 2, 2);
z-index: 300;
}
.green {
background-color: rgb(62, 198, 164);
top: 30px;
left: 30px;
z-index: 200;
}
.blue {
background-color: rgb(82, 82, 195);
top: 60px;
left: 60px;
z-index: 100;
}
</style>
- z-index 값을 각각 부여하여 가장 큰 값이 맨 위에 오도록 우선순위를 부여할 수 있다.
▶️실습 - 스크롤 박스 안에 객체 넣기
- <div>태그의 밖으로 넘치는 세 개의 사각형이 있다고 가정했을때
- overflow:hidden :
overflow는 넘치는 부분을 어떻게 할 것인지를 판단하는 속성이다.
➡️hidden 속성값을 통해 넘치는 부분 감춘다.
➡️추가로 position:relative 을 적용하여 부모 객체인 div박스(검은 테두리) 안에 세 개의 사각형이 위치하도록 적용
- overflow:scroll ➡️overflow에서 넘치는 부분을 scroll 박스로 처리해 줄 수 있다. 하지만 x축으로는 공간이 충분하기때문에 overflow-y를 사용한다.
- overflow-y:scroll
➡️y축 공간으로만 스크롤을 적용하도록 설정
선택자 부분에서 이해하는 데에 조금 주춤했지만 회고를 통해 다시 정리하고 검색해서 추가 공부를 해보니
이해하는 것에 큰 도움이 되었다.
회고를 진행하면서 position 속성 또한 부모요소의 position을 고려해야하는 부분을 좀 더 이해할 필요성을 느꼈다.
기본적인 화면만 브라우저에 출력했던 HTML+CSS 였는데 스크롤, fixed속성, sticky 속성 등을 통해서
화면이 동적으로 움직이는 것을 간접체험해볼 수 있었다.
CSS 관련 실습을 좀 더 진행해보고 직접 만들어보며 익숙해져야겠다고 느꼈다.🚀
'Recording > 멋쟁이사자처럼 BE 13기' 카테고리의 다른 글
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_25일차_"자바스크립트 함수와 배열" (0) | 2025.01.07 |
|---|---|
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_24일차_"자바스크립트" (0) | 2025.01.06 |
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_22일차_"HTML과 CSS" (3) | 2025.01.02 |
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_21일차_''프론트엔드 시작" (2) | 2024.12.31 |
| [멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_20일차_''디자인패턴" (2) | 2024.12.30 |
