2023.02.02 6일차 CSS
CSS
html로 문서구조 작성하고 어떤 스타일을 어떻게 줄지 css로 작성햇다.
처음 html배울때 wcschools에서 뭔지 설명봣다. css도 어떤건지 이제 이해가 되고 있다.
오늘 element배치되는 것 까진 알겠는데 좀 더 정교하게 배치하고 싶다.
wcschools상단바가 예상대로 움직이다가 위에 붙어서 감.
63. The position Property
꼭 필요하다고 느끼는 경우는 그렇게 많지는 않다. 5가지가 있다.
63.1 position : static
기본값 특별한 방법으로 포지션되지 않는다 위치를 변경할 수 없다.
페이지안에서 보통 배치되는 방법으로 배치된다.
기본값, 위치를 변경할 수 없음 포지션된 요소가 아니다라고 한다.
#head1{
position: static;
}63.2 position: relative;
보통의 표지션 원래 자기가 가진 위치 기준으로 위치를 변경함.
위에서 얼마나 멀어질지 오른쪽에서 얼마나 멀어질지
원래 위치 기준으로 위치를 변경함.
top bottom left right
#head2{
position: relative;
left: 50px;
}원래 위치에서 left 30px멀어지게 함.
#head7:hover{
position: relative;
bottom: 5px;
}hover되엇을때 한칸올라가게 = 강조하는 느낌을 주고 싶을때 이런식으로 사용해보자.
64. 단위 em
크기를 지정할때 단위 px(픽셀) %(부모기준) vw vh사용했엇다.
em은 부모요소 폰트크기 기준으로 몇배인지를 의미하는 것이다.
X의 2제곱을 표현할때 2가 조금 올라가게
<h1>
X<span class="up">2</span>
</h1>.up{
font-size: 16px;
position: relative;
bottom: 20px;
}
inline태그인 span으로 감싸서 조정을 한다. 글씨크기를 좀 줄이고 bottom에서 올라가게 해주자.
그런데 px로 지정하면 조금 불안정해보인다.
1em : 부모요소의 1배
0.5em : 부모요소의 절반크기
2em : 부모요소의 2배크기
.up{
font-size: 0.5em;
position: relative;
bottom: 1em;
}부모요소 기준으로 해서 좀 더 자연스러워졌다.
rem : 루트 요소 폰트 크기 기준
css unit em / rem등등 처음보면 당황하지말고 검색해보자.
65. position: fixed
view포트 기준으로 배치된다. 스크롤을 올리든 내리든 고정된다.
페이지를 돌아다닐때페이지 상단으로 가기 등 버튼이 계속 똑같은 위치에 있는 경우가 있다. 그럴때 사용된다.
position: fixed 하면 형제 element 가 자리를 뺏어버림.
즉 fixed 포지션된 요소는 보통의 배치 흐름에서 빠져버린다.
viewport는 창문이라고 생각하면된다. 창문의 한쪽에 붙여버려서 어딜 봐든 같은데 있게된다.
위로가기버튼
<div class="toTop">
<a href="#"><i class="fa-solid fa-up-long"></i></a>
</div>.toTop{
background-color: black;
color: white;
width: 70px;
height: 70px;
text-align: center;
line-height: 70px;
border-radius: 50%;
font-size: 35px;
position: fixed;
left: 5px;
bottom: 5px;
}66. position: sticky;
relative처럼 작동을함. 원래위치 기준에서 변하지 않음. 스크롤 안에 잇을때는 relative처럼 작동을함
스크롤 벗어나는 순간 fixed와 유사하게 작용함.
sticky : 보통의 배치 흐름에 있다가
스크롤을 벗어나면 포지션이 결정됨(top,bottom,left right)
가장 가까운 스크롤에 기준으로 됨.
#head3{
background-color: yellow;
position: sticky;
top: 0px;
}
h1:nth-child(5n){
position: sticky;
top: 50px;
background-color: violet;
}이전에만든 페이지를 기준으로 바꿔보앗다.
67. position: absolute -1
굉장히 어렵다. 언제 사용하나? 텍스트 필드위에 icon이있고 글씨가 있는 것이있다.
어떤 element위에 어떤 element를 배치하고 싶을 때 사용한다.
어디 기준인가? 가까운 position된 조상기준이다.
static이면 포지션된 요소가 아님. 즉 static이 아닌 element기준이다.
그럼 포지션된 것을 만나지 못한다면? html기준(루트)으로 배치됨.
루트 요소
나무뿌리처럼 아래로 뻗어나간다. tree구조
나무를 거꾸로 박아놓은것 맨위에 있는 노드를 루트라고 한다.
<div class="outer">
Lorem, ipsum dolor.
<div class="inner">
Lorem, ipsum dolor.
</div>
</div>.outer{
position: relative;
width: 500px;
height: 500px;
border: 5px solid green;
}
.inner{
width: 300px;
height: 300px;
border: 5px solid violet;
/* absolute : 가장 가까운 포지션된 요소 기준 */
/* 없으면 루트요소(html) */
position: absolute;
top: 5px;
right: 5px;
}
68. position: absolute-2
position:absolute또한 보통의 흐름에서 빠지게 된다.
69. position:absolute - 3
.name{
position: absolute;
top: 5px;
left: 5px;
background-color: rgba(0,255,0,0.5);
color: white;
font-weight: bold;
font-size: 24px;
}
.p-relative{
position: relative;
}<div class="p-relative">
<img src="img/1.png" width=200px alt="">
<!-- .name{사진}+p>lorem -->
<div class="name">사진</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam omnis modi eos tempora nostrum saepe porro laborum nobis, dolore asperiores, quisquam rerum error fuga, ad exercitationem eius. Ex, est eius!
</p>이미지 위에 설명을 올려보았다.
70. position:absolute - 4
!!확인문제!!
인풋박스위에 돋보기 버튼을 올려봐라.
.form{
position: relative;
}
.form > button{
position:absolute;
left:140px;
top:3px;
}
.form > input{
height: 20px;
}<div class="form">
<input type="text">
<button>
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>인풋박스가 너무작아서 좀 키우고 absolute로 위치를 조정해보았다.
div박스를 하나 만들어서 넣어야 다른 element가 추가되더라도 그 안에서 조정되는 것이라 계속 붙어있게 됨.
71. z-index
element위에 있을때 순서 정하기 z축의 값을 의미한다.
보통 마지막에 만든 element가 가장 앞에 있게 된다.
z-index 값이 클 수록 눈에서 가까워진다.
규칙이 까다로움. 값으로 auto나 숫자를 줄 수 있음.
기본값이 0이라고 보면 될듯?
#head1{
top: 0px;
}
#head2{
top : 36px;
left: 30px;
z-index: 3;
}
#head3{
top:72px;
left:60px;
/* 값이 클 수록 눈에서 가까워짐 */
z-index: 1;
}
#head4{
top:108px;
left:90px;
z-index: 2;
}
#head5{
top:144px;
left:120px;
}
72. bootstrap
css만들기 매우 귀찮고 노가다이다. 이걸 쉽게 해주는게 부트스트랩이다.
버전이 매우 빠르게 올라가고 있다. 얘를 사용하면 어떤일을 할 수 있을까?
https://getbootstrap.com/
Docs에 가면 이미 누군가가 만들어놓은게 잇음. 그래서 그냥 이걸 가져다 쓰기만 하면된다.
복사 붙여넣기하면 원하는 모양을 만들 수가 있다.
<button type="button" class="btn btn-primary">Primary</button>
여기 클래스들을 기준으로 조정하면 되지만? 이미 css파일을 만들어 놓았다.
https://cdnjs.com/libraries/bootstrap
여기서 bootstrap.rtl.min.css의 html모양 코드를 복사해주자.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
를입력해주면 여기 링크의 css파일이 사용되는 것이다.
이 css파일에 이미 코드가 들어있어서 btn클래스와 btn-primary클래슬르 어떻게 처리할 것인지가 정해져있다.
외워서 쓰는게 아니라 잘 찾아서 사용해라.
그런데 부트스트랩을 사용할때 꼭 해야하는 일이 있다.
Docs - Getting started - Introduction css파일도 필요하고 javascript파일도 필요하다.
Quick start에 설정해야하는 것을 알려줌.
1.<meta charset="utf-8"> 얘는 우리가 만든 html페이지를 utf-8로 해석해라 부트와 관련x이지만 일단 넣어주자.
2.meta element추가
<meta name="viewport" content="width=device-width, initial-scale=1"> 모바일 환경에서 잘보이게 해준다.
3.css파일 추가하기 bootstrap.rtl.min.css링크
4.js파일 추가하기 bootstrap.min.js링크 body 종료태그 이전에 넣기
자주사용할 것 같으니 기본 설정에 넣어주자.
<input type="button">은 빈요소라서 컨텐트를 넣을 수없다. 내용을 넣고싶다면 value를 해주면된다.
73. Badges
부가적인 정보표시하는 것 또는 알림 몇개있는 지 등
<h1>
Lorem, ipsum dolor.
<span class="badge bg-primary">NEW</span>
</h1>
<h1>
Lorem, ipsum dolor.
<span class="badge text-bg-secondary">HOT</span>
</h1>
<h1>
Lorem, ipsum dolor.<i class="fa-solid fa-fire"></i>
</h1>
<div>
<button type="button" class="btn btn-primary position-relative">
알림
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
4
<span class="visually-hidden">unread messages</span>
</span>
</button>
</div>
클래스별 element구조를 잘보고 사용해야한다. 사용자 클래스들이 전달해준 내용과 관련이 있을수도 있음.
처음부터 알아서 만들면 매우 귀찮은데 사용하면 쉽다.
74. Dropdowns
뭐누르면 메뉴가 나왓다들어갓다하는거
bootstrap.bundle.min.js가필요하다고 한다. 변경해주자.
자바스크립트 기능으로 팝업이 내려왓다 올라갓다 하는것임.
75. Modal
말이 복붙한다는 것이지 실제로 만들면 오류가 많이 난다.
누르면 창이 튀어나오는 것
75.1 Live demo
그냥 창나오게
75.2 Static backdrop
밖에 눌러도 안나가지게
등등 다양한 Modal을 만들 수 있다. 어떤 Modal을 만들때는 본인이 맞는걸 가져다 사용하는 것임.
75. Navbar
네비게이션 바꾸지
미디어쿼리 화면 크기에 따라 변경되도록하는 기능이있음.
이런것도 적용된 것을 구할 수 있음. 적절한 콘텐츠 링크 등을 바꿔주면 사용할 수 있다.
단순하지만 복잡하고 처음부터 만드는 것보다는 쉽게 만들 수 있다.
76.Paginations
페이징 할때 사용한다.
복붙해서 가져오면 가운데에 있는데
.justify-content-center {
justify-content: center!important;
}
잇어서 그렇다이부분을 다른 것으로 변경해주면 위치가 변경될것이다.
77. flexbox
flex박스는 자주 사용하고 우리가 직접 작성하면 시간이 많이 소요된다.
부트스트랩은 이것도 알아서 사용하도록 제공하고있다.
여러 규칙을 사용할 수 있도록 Utilities에 마련해놓았다.
flexbox로 만들고 싶다면 클래스에 d-flex추가만 하면된다. 이런식으로 다양하게 편리한 기능을 제공한다.
<div class="box d-flex justify-content-center align-items-center">
<div class="item">
Lorem.
</div>
</div>이런식으로 필요한 클래스를 추가하면 된다.
78. Spacing
element가 박스모델로 구성된다. margin padding 을 적절하게 주고 싶을때 사용하는 클래스이다.
1.Where property is one of: 어떤거?
사용하고싶은게 마진 m - for classes that set margin
패딩 p - for classes that set padding
2.Where sides is one of: 위치
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right 좌우(x축)
y - for classes that set both *-top and *-bottom 위아래(y축)
blank - for classes that set a margin or padding on all 4 sides of the element 안쓰면 4방향 다른
3.Where size is one of: 사이즈 얼마나?
크기 0~5 부트스트랩 안에 저장된 값을 기준으로 설정함.
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
<div id="box1" class="py-3">1</div>
<div id="box2" class="my-3">2</div>
79. Display property
.d-{value}
value값에는 다음것들이 들어간다.
none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex
d-none하면 element가 안보인다.
display:none 안보여서 흐름에서 빠진다. 하지만 실제 없는 것은 아님. 소스보면 있기는 있음.
이걸 활용해보자.
!!!자바스크립트 맛보기!!!
버튼을 누르면 class에 d-none이 추가되도록해보자.
<h1 id="head3">3</h1>
<!-- button.btn.btn-primary{show}+button.btn.btn-danger{hide} -->
<button onclick="show()" type="button" class="btn btn-primary">show</button>
<button onclick="hide()" type="button" class="btn btn-danger">hide</button>
<script>
function show(){
document.querySelector("#head3").classList.remove("d-none");
}
function hide(){
document.querySelector("#head3").classList.add("d-none");
}
</script>자바스크립트로 문서를 조작할 수 있다!! 자바스크립트에서도 CSS선택자를 사용하므로 선택자를 잘 알아둘 필요가 있다.
80. Tables
<!-- 테이블 기본요소 -->
<table>
<!-- 제목 행이 있는 요소 -->
<thead>
<!-- 한행(table row) -->
<tr>
<!-- 제목셀(cell) -->
<th>번호</th>
<th>제목</th>
</tr>
</thead>
<!-- 본문행들이 있는 요소 -->
<tbody>
<!-- 행(table row) -->
<tr>
<!-- 본문셀(cell) -->
<td>1</td>
<td>Lorem ipsum dolor sit.</td>
</tr>
</tbody>
</table>내용만 넣고 테이블 형식을 가져다가 사용할 수 있다.
<table class="table">
2023.02.02 후기
alt + shift + f 줄에 맞춰 정리
HTML › Format: Wrap Line Length을 0으로 한줄에 이미 작성된걸 새로운줄로 바꾸지 않는 설정
76번 관련 !important
CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다.
만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다.
다시 속성값을 재설정하고 싶으면 !important를 다시 붙인다.
먼저 css시트를 가져와서 검사하고 여기에 또 !important잇으니까 이걸로 적용되게하는듯.
!important없애면 내 마음대로 변경이 불가능하다.
강사님이 버튼에 type을 자꾸 안넣으시고 bootstrap페이지에는 타입이있다. 차이점이 무엇일까?
https://nykim.work/96 button에 type=button을 해주는 이유
button의 type에는 3가지 값을 지정해 줄 수 있는데 각각 submit, reset, button을 줄 수있다.
따라서 form 태그 내에서 button을 사용할 때 타입 명시가 없다면 기본적으로 'submit' 처리가 일어나게 된다.
div박스 구조 잘알아야한다. 지금내가 지정하고 싶은 것이 div인지 안에 박스인지 등등
어딜 포장했는지를 알고 개발자도구로 건들고 싶은 부분을 알아야한다. 조정이 잘안된다면 개발자도구로 만지고 있는 부분을 잘 확인하자.
확실히 두번 보니까 감이 온다. 여러사람이 가르치니 한쪽에서 짚지않은 부분을 언급해주면 이해가 더쉬워진다.
부트스트랩을 배웠는데 힘들게 하나하나 노가다 마진 넣고 햇는데 복붙으로 만들어진다. 말이안되는듯.
그래도 사용하면서 느끼는 건데 결국 내가 원하는대로 만들고 싶으면 직접짜는 수밖에 없는 듯하다. 편리하지만 어려운도구이다.
기본적으로 css html에 뭐가 있는지 알고 필요한 것을 적절하게 꾸밀 수 있게 되는게 빠를듯하다
처음부터 새로 만드는 것보다 기본 가이드 라인을 가지는 느낌으로 생각하면 될 것 같다.
벌써 CSS가 마무리 되는 느낌이다. 얼른 java쪽으로 가고 싶다.