***CSS
* 레이아웃
01. 수평 정렬
: 자손에 float 속성을 지정, 부모의 overflow 속성에 hidden 적용
<style>
div.container { overflow:hidden; } -- 부모 속성 (줄바꿈)
div.item { float: left; (margin: ; padding: ;)} -- 자손 속성 float (왼오정렬)
</style>
+) 부모 속성에 overflow:hidden 적용해야 하는 이유
---> 적용하지 않으면 뒤의 컴포넌트가 계속 float의 영향을 받아 레이아웃의 옆으로 따라붙는 등 모양이 이상해짐 -- 줄바꿈 정렬을 위해 사용한다!
clear:both를 적용하는 방법도 있는데 수평정렬 레이아웃을 중첩해야 하는 경우엔 부모속성을 추가하는게 더 효율적인가봄? 상황 따라 봐가면서 적용하도록 하자
02. 중앙 정렬
: 정렬할 가장 큰 몸체부분에 너비(width) 값을 부여, margin 속성 0 auto (중앙정렬 시켜주는거)
<style>
body { width:960px; margin:0 auto; } --body나 contents나 아무튼 중앙 정렬할 가장 바깥 틀에 적용
</style>
03. one true 레이아웃 (수평+중앙)
: 행을 기준으로 공간을 배치
: 행 구성 - 열 구성 - 레이아웃 구성 (가장 바깥 틀에 중앙 정렬 먼저, 그 아래 수평 정렬)
<style>
body { --중앙 정렬
width: 500px;
margin: 10px auto; }
-- 수평 정렬
#middle { overflow: hidden; }
#left { float: left; width: 150px; background: red; }
#right { float: right; width: 350px; background: blue; }
</style>
* 요소 배치
01. 절대 위치를 사용한 배치
: 부모 속성 position:relative 자식 속성 position:absolute
└ 요소의 위치를 조정하고 싶을 때 사용 └ 그 조정할 위치를 절대 좌표로 지정
02. 중앙 배치
: 중앙 정렬할 div태그의 position:absolute left:50% top:50% --절대위치, 왼위의 50% 위치로 지정
div 태그의 margin-left, margin-top 속성에 div 태그 크기의 반만큼 음수 입력
(width:500 height:250 일 때, margin-left:-250 margin-top:-125)
- position:absolute left:50% top:50% 일 때 div태그의 시작점을 기준으로 배치됨
- ★즉 진짜 중앙정렬을 시키려면 박스 위치를 박스의 반만큼 반대 방향으로 옮겨야 함 (음수 입력 이유)
03. 고정 위치
: 웹페이지의 상하좌우에서 사용자가 스크롤할 때 계속 화면에 고정되어 따라오는 요소 (고정바)
: position:fixed (고정) left,top,right,bottom: 위치 지정 width,height: 크기 지정
---> 이 때, 본문 위치를 고정바와 겹치지 않게 하려면 margin으로 거리를 벌려주는 게 좋음
04. 글자 생략
: text-overflow: ellipsis 설정! ---> 가나다라마바... 형태로, 박스 넘어가는 부분이 [ ... ] 처리됨
overflow: hidden; --박스 넘어가는 부분 숨김
text-overflow: ellipsis; -- 단, 텍스트는 ... 으로 생략처리해 숨김
* 반응형 웹
: PC, 폰에 맞게 디자인이 자동으로 반응해 변경되는 웹 페이지
: 개발 효율성, 유지 보수 용이 --- 미디어 쿼리media query 사용해 개발
: 사이즈가 너무 크면 분리해 만드는 게 더 낫긴 함 (naver/com과 m.naver/com 분리해놓은 것처럼)
1. 뷰 포트 (반응형 웹에 반드시 들어가야 하는 것)
: meta 태그: 추가적인 웹 페이지 정보 제공 --- 뭐 예를 들면 검색 엔진에 뜨는 타이틀, 사이트 설명 부분
<meta name="title" content="">
- content 속성에 설정할 수 있는 값
2. 미디어 쿼리
01. 설정
- @ 규칙
: 스타일시트 내부에서 특정한 규칙을 표현하는 데 사용
@media (screen, print...) : 장치나 화면 비율에 따른 레이아웃 디자인
@import : 외부 스타일을 가져옴
@font-face : 글꼴을 추가로 정의
- media
: link 태그에 입력해 해당 미디어 쿼리 조건에 맞는 장치에서만 css 파일을 불러옴
<link rel="stylesheet" href="파일 이름" media="미디어 쿼리">
ex.
<link rel="stylesheet" href="screen.css" media="screen"> ---> 스크린에서만 적용되는 css파일
02. 미디어 타입
- 연산자
- only: 해당 장치에서만
- not: 해당 장치를 제외한 나머지
- and: 미디어 특징 여러개를 하나로 결합
- , 쉼표: 개별 미디어 쿼리
참고: only, not 사용 시 미디어 타입을 반드시 지정해야 함
- 특징
ex1. 화면 너비에 따라 다른 미디어 쿼리
@media screen and (max-width:760px) {} --화면 너비 760px 이하일 때 적용
@media screen and (min-width:761px) and (max-width:959px) {} -- 너비 761~959일 때 적용
ex2. 화면 가로/세로에 따른 미디어 쿼리
@media screen and ( orientation:portrait ) {} --orientation: portrait ---> 세로 화면
@media screen and ( orientation:landscape ) {} --orientation: landscape ---> 가로 화면
03. 웹 패턴
: 미디어 쿼리 구성은 모바일 기준!
: 일반 구성(PC 화면)에서 float의 left, right를 활용해 배치하고 모바일(미디어쿼리)에서 전부 해제
: 모바일에서 float:none으로 해제 ---> 수직 배치로 바뀌면서 메뉴가 섹션의 위 또는 아래로 향하게 됨
※ 참고: li { list-style:none; } ---> 리스트 설정 시 앞의 ○ 이런거.. 안 보이게 해줌
* bootstrap
http://www.w3schools.com 에서 받을 수 있는 라이브러리.
- 직접 다운받은 bootstrap 불러오기
//head
<link rel="stylesheet" href="css/bootstrap.css"> --css파일 불러오기
<script src="js/bootstrap.js"></script> --js파일 불러오기 (css와 방식이 다르므로 주의!)
//body
<img src="img/Koala.jpg" class="img-thumbnail" width=300px height=250px>
- 외부 서버에 저장된 bootstrap 불러오기 (cdn 방식)
01. 이미지 모양
//head
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
//body
<img src="img/Koala.jpg" class="img-thumbnail" width=300px height=250px>
02. 버튼 모양
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
//버튼 생성
<button type="button" class="btn btn-link">Link</button> --button 태그
<input type="button" class="btn btn-info" value="Input Button"> --input의 button 속성
<div class="btn btn-info">info</div> --div를 이용해 블록 단위로 감싸진 텍스트
<a href="#" class="btn btn-link">Link</a> --하이퍼링크가 걸린 텍스트
03. 테이블 모양
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
//table
<table class="table table-hover">
<thead>
<tr>
<th>
04. 페이지 모양
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
//bootstrap.css의 .pagination
.pagination {
display: -ms-flexbox;
display: flex;
padding-left: 0;
list-style: none; --리스트의 ○ 없애주는거
border-radius: 0.25rem; }
//body
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
05. dropdown ---> 버튼 누르면 메뉴가 드롭되는 것
//body
<div class="btn-group"> --일반 버튼 그룹
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group"> -- 드롭다운 화살표가 포함된 버튼을 그룹으로 추가할 것
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony </button> -- data-toggle="dropdown" ---> 버튼 클릭 시 "dropdown"class로 접근해 데이터 가져오라고
<div class="dropdown-menu"> --드롭다운 메뉴, 아래 아이템 나열.
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div></div></div>
06. collapse ---> 내용 펼치기(show)/숨기기(hide)
//---1. data-toggle, data-target 사용
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> Simple collapsible </button>
<div id="demo" class="collapse"> Lorem ipsum </div>
//---2. a, href 사용
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo"> 파이썬 </a>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
※★
data-toggle: bootstrap이 뭘 해야하는지 알려줌. (link의 a 태그 같은 역할)
(data-toggle="collapse" : collapse의 데이터를 가져오란 뜻)
data-target: bootstrap에 어떤 요소가 오픈될 건지 알려줌. (href 같은 역할)
(data-target="#demo" : id=demo의 요소를 출력한단 뜻) --- 대체로 toggle에 함께 있는 id를 가져옴
07. form, input 모양
<form action="/action_page.php"> --제출 시 입력데이터를 여기로 보냄
<div class="form-group"> --그룹형 폼
<label for="email">Email address:</label>
<input type="email" required="required" class="form-control" placeholder="Enter email" id="email">
</div> //input type="email" required="required" ---> 이메일 형식으로 입력, 검사
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
'수업 > 정리' 카테고리의 다른 글
| 220216 javascript event, function, date (0) | 2022.02.16 |
|---|---|
| 220215 bootstrap , Javascript 출력, 연산자 (0) | 2022.02.15 |
| 220211 html_입력, 구조화 css_구조,선택자,속성 (0) | 2022.02.11 |
| 220210 HTML5 입력양식 태그 (0) | 2022.02.10 |
| 220209 HTML5 글자, 목록, 미디어, 앵커, 테이블 (0) | 2022.02.09 |