판봉 개발 일기
CSS 레이아웃 및 스타일 속성(2) 0726 본문
오늘은 CSS의 두번째 시간이었다.
먼저 위치속성을 알아 보았다.
위치 속성
- position 속성
- static(기본): 일반적인 문서 흐름에 따라 배치
- relative: 기준 위치를 선택한 요소로 변경
- absolute: 문서(static) 또는 부모(.relative) 기준 절대 위치 좌표를 설정
- fixed: 화면을 기준으로 절대 위치 좌표를 설정
위치 속성과 관련된 공식
- 자손의 position속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용
(공간영역을 차지하도록 함)
- 자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에
relative키워드를 적용
(기준점을 변경)
즉, 쉽게 말해서 static -> 정적임(멈춰있는상태)
dynamic -> 동적임(움직이는 상태)를 뜻한다.
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
}
.box {
width: 100px;
height: 100px;
/*absolute: 절대적인*/
/*문서기준으로 특정위치에 요소를 배치할 수 있음*/
position: absolute;
}
.red {
background-color: red;
left: 10px;
top: 10px;
}
.green {
background-color: green;
left: 50px;
top: 50px;
}
.blue {
background-color: blue;
left: 90px;
top: 90px;
}
</style>
</head>
<body>
<h1>고정 위치입니다.</h1>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>
위 접은글을 펴보면 코드가 나온다.
구현 화면은 이렇다.
위이 코드중에서 absolute -> fixed로 바꾼다면 스크롤을 내릴때 세개의 박스가 쭈욱 화면에 고정이 되면서 따라온다.
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
}
.box {
width: 100px;
height: 100px;
/*absolute: 절대적인*/
/*부모(relate)기준으로 특정위치에 요소를 배치할 수 있음*/
position: absolute;
}
.red {
background-color: red;
left: 10px;
top: 10px;
}
.green {
background-color: green;
left: 50px;
top: 50px;
}
.blue {
background-color: blue;
left: 90px;
top: 90px;
}
.wrapper {
position: relative;
border: 1px solid black;
/*자식 요소가 absolute이면 컨텐츠 높이 사라짐*/
/*높이값을 수동으로 줘야함*/
height: 300px;
}
</style>
</head>
다음 코드는 전의 코드를 div 태그안에 wrapper라는 클래스를 만들고 해당 클래스의 포지션값은
relative로 준것이다.
구현 화면은 이러하다
잘 보면 세개의 색깔이 있는것이 위치가 바뀐 것을 알 수있다.
단 주의해야 할점은 자식 요소에 absolute를 주게되면 부모의크기는 사실상 없어져 버리기 때문에 height를 주어야한다는 점이다.
z-index 속성
이 속성은 요소의 z축 값을 변경하는 것이다.
예를 들어 가장 위에 있어야 하는 경우는 9999를 입력한다
(개발자들간의 관례?라고 했다.)
예전에 영상을 잠깐 했었어서 포토샵을 생각하면 이해가 편했다.
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px;
}
.box {
width: 100px;
height: 100px;
/*absolute: 절대적인*/
/*문서기준으로 특정위치에 요소를 배치할 수 있음*/
position: absolute;
}
.red {
background-color: red;
left: 10px;
top: 10px;
/*z-index 값이 크면 클수록 다른 요소보다 위에 있음*/
/*예시) 팝업창 : 9999*/
/*회색 영역 : 9990 */
z-index: 100;
}
.green {
background-color: green;
left: 50px;
top: 50px;
z-index: 500
}
.blue {
background-color: blue;
left: 90px;
top: 90px;
z-index: 1;
}
</style>
</head>
<body>
<h1>고정 위치입니다.</h1>
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</body>
</html>
이런식으로 바꿀 수 있습니다!
overflow 속성
overflow 속성이란 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지를 지정해주는 것이다.
예를 들어서
hidden : 영역을 벗어나는 부분을 안 보이게 지정한다.
scroll : 영역을 벗어나는 부분을 스크롤로 만듦
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
p {
width: 250px;
height: 150px;
border: 3px solid black;
}
p:nth-child(1) {
/*요소(element)의 크기보다 컨텐츠가 클 때 숨김처림*/
/*overflow : 넘침 */
/* hidden: 숨김 */
overflow: hidden;
}
p:nth-child(2) {
overflow: scroll;
}
p:nth-child(3) {
overflow-y: scroll;
}
p:nth-child(4) {
overflow-y: auto;
}
p:nth-child(5) {
overflow: hidden;
/*컨텐츠가 내용 밖으로 넘어서면 말줄임표(...)*/
text-overflow: ellipsis;
/*빈 공간은 기본적으로 밑으로 내림*/
/*밑으로 안내림, 옆으로 이어짐*/
white-space: nowrap;
height: 25px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis doloribus officia repudiandae, dolores blanditiis nobis quibusdam maxime quaerat ea tempora vel deserunt numquam ipsa nesciunt voluptates dignissimos, natus omnis illum?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda voluptates doloribus totam doloremque explicabo maiores architecto vitae eveniet dolor quisquam repudiandae illo eaque mollitia praesentium, tenetur eius quas repellendus exercitationem!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, porro distinctio neque ipsam quo odio in. Modi neque sit ducimus aperiam natus. Illo, iure earum! Cupiditate dolor reprehenderit possimus nobis!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat explicabo praesentium dolorum eligendi at. Blanditiis quibusdam culpa ducimus quos sunt, vitae, eaque enim facere totam labore iste, ipsam nihil optio?</p>
<p title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente minima corrupti eaque et quibusdam cupiditate inventore earum doloribus. Necessitatibus voluptate culpa itaque ea explicabo exercitationem atque facilis repudiandae numquam quia!">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente minima corrupti eaque et quibusdam cupiditate inventore earum doloribus. Necessitatibus voluptate culpa itaque ea explicabo exercitationem atque facilis repudiandae numquam quia!</p>
</body>
</html>
참고로 white-space와 text-overflow는 같이 써야 합니다!
float 속성
left : 왼쪽에 붙임, right: 오른쪽에 붙임
원래의 속성은 이미지를 글씨 위에 표현하기 위해 만들어 졌다.
웹 페이지의 레이아웃을 만들때 많이 사용합니다.
*HTMl은 원래 논문을 표현하기 위해 만들어 졌다는 점을 유념하면 이해가 편할 것이다.
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
img {
/* 논문에 이미지를 배치하기 위한 용도로 시작*/
float: left;
margin: 0 0.5rem 0 0;
}
</style>
</head>
<body>
<img src="penguin.jpg" width="200">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta dolor corporis minima totam doloribus fugiat? Odio fugit tempora atque distinctio error perferendis quam ex nemo, alias facilis non nisi ipsam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia culpa nihil quos reprehenderit magnam, ex velit dicta rerum illo perferendis repellat neque ut esse ullam tempore accusantium consequatur. Facere, et!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta dolor corporis minima totam doloribus fugiat? Odio fugit tempora atque distinctio error perferendis quam ex nemo, alias facilis non nisi ipsam.</p>
</body>
</html>
float 속성은 주의해야 할점이 있는데 요소의 배치를 어디에서 시작하는지에 대한 것이지
정렬이 아니라는 점이다. 예를 들어서 다음코드는 이런 식으로 오른쪽에서부터 시작이 됩니다.
(번호를 잘 보세요)
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
padding: 10px;
/* float: left; */
/* 오른쪽부터 요소가 배치됨*/
/*정렬X, 요소를 오른쪽 배치*/
float: right;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
body {
width: 700px;
margin: 0 auto;
}
/*
nav {
position: fixed;
top: 10px;
} */
nav {
/* 스크롤박스 외부 원래 문서 배치 */
/* 스크롤 박스 내부 들어오면 top/left적용 */
position: sticky;
top: 0px;
z-index: 10;
}
nav ul {
list-style: none;
padding: 0;
/* 태그 안에 컨텐츠를 중앙 정렬 */
text-align: center;
}
nav li {
/* 옆으로 나열*/
display: inline-block;
margin-left: 10rem;
/*이거만 쓰면 가운데 정렬이 안됨 그래서 first child를 씀*/
}
nav li:first-child {
margin-left: 0;
}
article {
/* calculate: 계산하다 */
/*- , + 는 꼭 띄어쓰기를 해야함, 붙이면 부호로 인식을 하기때문*/
width: calc(100% - 100px - 1rem);
float: left;
margin-right: 1rem;
margin-bottom: 1rem;
}
aside {
width: 100px;
float: left;
position: sticky;
top: 5.5rem;
margin: 0;
}
section {
/*a 태그로 스클로 이동했을 때 상단 마진을 줌*/
scroll-margin-top: 8rem;
}
/* section h2{
scroll-margin-top: 8rem;
} */
footer {
clear: both;
}
header,
nav,
.banner,
article,
footer,
aside {
background-color: burlywood;
}
</style>
</head>
<body>
<header>
<h1>Jeader</h1>
</header>
<nav>
<h1>Nav</h1>
<ul>
<li><a href="#menu-1">Menu1</a></li>
<li><a href="#menu-1">Menu2</a></li>
<li><a href="#menu-3">Menu3</a></li>
</ul>
</nav>
<div class="banner">
<h1>Banner</h1>
</div>
<article>
<section id="menu-1">
<h2>Menu1</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde in alias nulla error dolore quisquam corrupti nobis perspiciatis iste pariatur obcaecati totam, quas odit molestias expedita, perferendis eius voluptate aspernatur?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde in alias nulla error dolore quisquam corrupti nobis perspiciatis iste pariatur obcaecati totam, quas odit molestias expedita, perferendis eius voluptate aspernatur?</p>
</section>
<section id="menu-2">
<h2>Menu2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere perferendis aperiam ducimus eum. Quo sunt ipsum blanditiis vero voluptatum quas praesentium officiis sit voluptas beatae, ipsa voluptates impedit debitis dolorem?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde in alias nulla error dolore quisquam corrupti nobis perspiciatis iste pariatur obcaecati totam, quas odit molestias expedita, perferendis eius voluptate aspernatur?</p>
</section>
<section id="menu-3">
<h2>Menu3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aperiam eius ut suscipit magni necessitatibus atque corporis ad nisi. Dolorum, quod. Non explicabo, quae itaque nobis adipisci aliquid sed quaerat!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde in alias nulla error dolore quisquam corrupti nobis perspiciatis iste pariatur obcaecati totam, quas odit molestias expedita, perferendis eius voluptate aspernatur?</p>
</section>
</article>
<aside>
<h1>Aside</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit maxime cumque magnam non iure, sequi eligendi quam ex quas dolor vero mollitia esse minima sapiente ut, amet neque aut provident.</p>
</aside>
<footer>
<h3>footer</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, a? Rem doloribus quibusdam voluptate quia dolorum, ab omnis eligendi placeat aspernatur, iure quis nostrum distinctio vitae explicabo aut! Nulla, libero!</p>
</footer>
</body>
</html>
위의 코드를 살펴보면 Nav 부분과 Aside 부분이 고정이 된채로 스크롤을 해도 잘 움직이지 않습니다.
그리고 중간에 calc라는게 있는데 이것은 계산을 할때 쓰는 것으로 -,+를 쓸수있습니다.
하지만 주의해야 할점이 띄어쓰기를 잘못할 경우 음수나 양수로 인식을 해버리기 때문에 각별한 주의가 필요합니다.
그리고 fixed보다 sticky가 좋은것 같습니다.
판봉의 오늘의 정보
사실 오늘 수업은 다 이해가 되지 않았습니다.
배운 내용을 토대로 적용을 해보아도 무언가 잘 되지 않았습니다.
예를들어 Aside가 안먹거나 하는 부분이 있었죠.
그래서 다시 HTMl 구조를 싹다 손보기로 했습니다
어쨌든 오늘의 정보는 이러합니다.
예습은 절대 하지말고 복습or자격증공부or코딩테스트(1개~2개)씩을 공부를 합니다.
그리고 참고로할 사이트들은 이렇습니다.
1.Codesinal -> 모든언어 가능합니다.
2.프로그래머스 -> 카카오문제들을 위주로 푸는게 좋습니다.
3.codegym(6만원 유료) -> 자바만 되는 곳입니다.
그리고 로켓펀치닷컴이라고 선생님께서 가끔씩 들리시는 구직사이트를 발견했습니다.
또한 html 태그 안에 dri="rt"이라고 쓰면 문자가 오른쪽에서부터 시작이 됩니다.
오른쪽부터 읽는 나라들도 있으니 이점은 나중에 쓸일이 생기면 쓸 것 같습니다.
그리고 부모요소가 스크롤이 되어야 sticky가 먹습니다. 아닌거는 먹지를 않는다고 합니다.
*asdie와 footer는 아티클 밖에 존재해야 합니다. -> 아마 이런것들 때문에 구조상의 오류가 심각하게 났던 것 같습니다.ㅠㅠ
'JAVA 웹개발 과정' 카테고리의 다른 글
| 0727 (0) | 2021.07.27 |
|---|---|
| CSS 레이아웃 및 속성과 Flex에 대하여[0727] (0) | 2021.07.27 |
| CSS 의사 클래스 -구조, 문자 선택자에 대하여 0723 (0) | 2021.07.23 |
| CSS의 크기 단위, 박스모델, 보더, 동위 선택자, 의사 클래스 선택자에 대하여(0722) (0) | 2021.07.22 |
| 0721 CSS 선택자의 다른 버전입니다 (0) | 2021.07.21 |
