7강
float 관련 문제
- float 준 요소 다음에 clear:both 넣은 <div> 추가하는 걸 추천
Navbar 만들기
<nav>
- 기능은 <div> 와 똑같음
- <div> 보다 읽기가 쉬움
<section></section>
<footer></footer>
Selector 문법
- 공백 : ~안에 있다 라는 뜻
- .navbar li { }
- : ~안에 모든 자식 :
- .navbar>li { }
a 태그 문법
a href =”#” → #은 아직 링크를 지정하지 않았을 때 사용
링크 디자인
- a 태그는 밑줄이 생기는데 아래 코드로 밑줄 제거
text-decoration: none;
- a 태그 방문, 클릭 시 링크 색상 변경
.클래스(링크):visited {
color : black;
}
(참고) 태그에 class 2개 이상 부여하려면 클래스 뒤에 (띄어쓰기)클래스명으로 부여 가능
<driv class="navbar **content**"></div>
8강
Background
이미지 넣기
.main-background {
background-image: url(../img/shoes.jpg);
}
../ 는 상위폴더로 이동하라는 뜻이다.
이미지 2개 넣기
.main-background {
background-image: url(../img/shoes.jpg), url(person.jpg);
}
body 태그 내에 width 100% 부여
.main-background {
width: 100%
}
배경 이미지 기능
- background-repeat : 배경 여백이 있다면 배경이 반복하는데 반복 없애는 기능
.main-background {
backgroud-repeat: no-repeat;
}
- 배경 채우는 기능
- cover : 배경이 잘려도 되는 꽉 채움
- contain : 잘림 없이 배경 꽉 채움
- background-position : 배경의 위치 변경
- background-attachment : 스크롤 시 배경 위치 조정
- filter: brightness(%) : 배경의 필터 입히기 → 배경 안에 글씨가 있다면 같이 필터 적용됨
- linear-gradient : 색을 점진적으로 변하게 주는 기능
.background-image: linear-gradient ( rgba(0,0,0,5), rgba(0,0,0,5), url(이미지 경로) ;
margin collapse 현상
- 2개의 박스 테두리가 겹쳐서 생기는 현상
- 2개의 박스 마진이 있다면 둘 중 더 큰 마진을 하나에만 적용함
margin collapse 해결 방안
- 부모태그 혹은 큰 박스의 테두리를 겹치지 않게 조정함
- 예를 들면 큰 박스에 padding 1px 등의 값을 주어 간격을 생기게 하여 그 뒤로 margin 값 조정
9강
<body> 태그에는 기본 margin 있음 → margin 값 0으로 조정
class명 작명 시 중복피하려면 접두어를 많이 활용
ex) main-button, main-background 등
position / 좌표 레이아웃
Position 속성
- position 부여 시
- 좌표 이동 가능
중요! position: relative; : 기준점 잡는 속성
→ 내 원래 위치를 기준으로 이동
중요! position: absolute
→ position: relative 가진 부모 기준
→ 내 부모 태그가 기준
<div class="main-background"> <-- 부모태그
<h4 class="main-title"></h4>
<p class="content"></p>
<button class="main-button">구매하기</button>
.main-background {
position: relative;
}
.main-button {
position: absolute;
}
position: static;
→ 좌표 이동 x
position: fixed;
→ 현재 화면을 기준으로 고정시킴
- (참고) position: absolute 준 요소를 가운데 정렬하려면
.main-button {
padding: 15px;
font-size: 20px;
background: white;
border: none;
border-radius: 5px;
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 150px;
}
- top : 100px → 위에서부터 +100px 적용 / - 이동도 가능
- left, right , bottom
.main-button {
position: relative;
top: 100px;
left: 100px;
right: 100px;
bottom: 100px;
}
2. 공중에 뜸
10강
z-index : 어떤 코드가 앞에 있는지 뒤에 있는지 조절하기 위함
숫자가 높을수록 앞으로 온다.
z-index: 숫자
width 폭을 %로 정할 수 있는데, 그러면 PC에서 너무 크게 나와 아래와 같은 걸로 설정해줌
- max-width : 최대 폭을 정할 수 있음
- min-width: 최소 폭을 정할 수 있음
width는 content 영역의 너비를 의미함
아래 그림과 같이 width를 설정할 경우 Padding/border 포함하지 않은 값
아래와 같이 똑같은 상자지만 크기가 차이가 생긴다.
이를 해결하기 위해서는
box-sizing: border-box 를 입력하여 실질적인 padding/border 포함한 600px의 상자로 설정해준다.
.explain-box {
width: 80%;
max-width: 600px;
margin: auto;
padding: 20px;
text-align: center;
background-color: #eee;
position: relative;
top: -40px;
box-sizing: border-box;
}
box-sizing: content-box 는 width에 padding/border 등을 포함하지 않은 상자
(필수) 코딩을 시작할 때 CSS 파일 맨처음에 써두고 시작하면 좋은 코드가 있다.
div {
box-sizing: border-box;
}
body {
margin: 0px;
}
11강
form & input 태그
form
- <form action=“경로~”> → 작성한 내용이 어떤 서버 경로로 전달 되는지
- <form action=“경로~” method=”get”> → 작성한 내용이 어떤 방식으로 서버에 전달 될지
input
- <input type=”text”> → 일반 글자 입력할 때
- <input type=”password”> → 패스워드 입력할 때
- <input type=”email”> → 이메일 입력할 때
- <input type=”date”> → 날짜 입력할 때
- <input type=”checkbox”> → 체크박스
- <input type=”radio”> → 라디오버튼
input value
- <input value=”미리 채워진 값”>
- <input placeholder=”배경글자”>
- <input name=”input 이름”> → 서버 개발시 필요함(input 이름 설정할 때)
- option 기능 → 옵션 리스트
<select>
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
- <input type=”submit> → 정보값 전송
- 전송 버튼 만들기
<button type=”submit>전송</button>
input 스타일 할 때 지정해서 스타일을 적용하고 싶다.→ input[속성명=속성값]
input[type=text] {
padding: 10px;
font-size: 20px;
border: 2px solid red;
border-radius: 5px;
}
12강
selector에서 콤마쓰면 중복선택이 가능
아래와 같이 CSS 시작할 때 먼저 작성해두면 좋음
div, input, textarea {
box-sizing: border-box;
}
body {
margin: 0px;
}
13강
표 만들때
<tabel> </table>
행과 열 그려야하는데, 가로(행)부터 그리고 세로(열) 그림
<tr>: 가로 행 만들 때(row)
<td> : 세로 열 만들 때(column)
<th> : 제목용 세로 열
<thead> : 최상단 제목 표현(제목 행)
<tbody> : 제목 표현(일반 행)
<table> : 테이블의 기본적인 틈이 존재 이를 없애려면
table {
border-collapse: collapse;
}
셀 안의 요소 상하정렬
<td style="vertical-align: top/middle/bottom">셀 안의 요소 상하정렬</td>
vertical-align의 용도
- 글씨간의 세로 정렬 할 때 쓰임
- table 안에서 세로정렬 할 때 쓰임(top/middle/bottom, super/sub/px 단위도 가능)
- inline/inline-block 요소 간의 세로정렬 할 때 쓰임
display:inline → 항상 옆으로 채워지는 폭과 너비가 없는 요소
(참고) 일반 <div> 로 표 만들기
- 가로 : table-row = tr
- 세로 : table-cell = td
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;"></div>
</div>
</div>
강의 하나 하나 짧은 시간이지만, 따라해보고 이해 안되면 다시 보느라 보통 1강의당 빠르면 30분 보통 1시간 ~ 1시간 30분 정도 걸리는 거 같다. 이해 하기 위해 시간을 쓰고 있지만.. 더 열심히 해야겠다 ㅠㅠ 좀 더 일찍 시작 할 걸 그랬나보다..
'HTML & CSS' 카테고리의 다른 글
| 2023.05.04 CSS 기본 개념 (0) | 2023.05.05 |
|---|---|
| 2023.05.03 CSS 기본 개념 (0) | 2023.05.04 |
| 2023.05.01 CSS 기본 개념 (2) | 2023.05.02 |
| 2023.05.01 HTML 기본 개념 (1) | 2023.05.02 |
| 2023.04.07 HTML 기본 개념(1) (2) | 2023.04.07 |
