출처 : HTML /CSS : 네이버 블로그 (naver.com)
HTML /CSS
팁 cmd + d 한줄 복사 가능 원하는 태그 쓰고 + tab하면 전부 완성해줌 ( 이건 스크립트 프로그램마다 다르...
blog.naver.com
팁
cmd + d 한줄 복사 가능
원하는 태그 쓰고 + tab하면 전부 완성해줌 ( 이건 스크립트 프로그램마다 다르긴 한가)
shift + 방향키 오른쪽 해서 복사하고자 하는 단어 선택해서
cmd + x 하면 잘라내기
cmd + 방향키 오른쪽 : 맨 뒤로
cmd + 방향키 왼쪽 : 맨 앞으로
cmd + / 하면 <!----> 뜨면서 주석처리 가능!!!
option + cmd + L : 라인 정렬
html에서도 클래스 자동완성으로 쓸 때 .wrap + 탭 누르면
<div class=“wrap"> 자동 생성
div 태그 외에도 ul태그의 id 박스값을 하고 싶으면 ul#box <ul id=“box”>가 나온다
HTML
<> </> 얘는 태그
태그 열고 한칸 띄면 속성 attribute 적을 수 있음
head에는 세팅값을 입력
<!DOCTYPE html>
<html lang="en">
이 문서는 html임 그리구 en 쓸거야
<meta charset="UTF-8">
메타 캐릭터셋 을 utf-8로 저장해줘
인라인태그 inline :
가로배치가능
크기지정 안됨 ( width / height ㄴㄴ)
창 크기 반응 있음
인라인태그는 자식으로 인라인 태그만 가질 수 있음
대표적 인라인태그
span : 사용자 정의 영역 / 딱히 역할은 없음
img / strong
블럭태그 block :
구조 만들 때 사용 ( 컨테이너)
세로배치 가능
크기지정 가능 ( width / height 지정 가능)
창크기 반응 없음
width는 별도의 지정값 없으면 100%
블럭태그는 자식으로 또다른 블럭 or 인라인 태그 가질 수 있음
(except. p태그는 자식으로 인라인만 가넝)
div / article / h1-h6 / ul / p
div 태그 : 어떤 의미도 존재하지 않는 태그
블럭 레벨 엘리먼트이기 때문에 한 줄을 쓴다
부모자식태그
자식요소: 내 아래 태그
내 바로 밑에 있는 태그만 해당
바로밑 태그+ 하위태그들은 전부 다 하위요소
부모태그 : 바로 위 태그
바로 위에 있는 태그만 해당
바로 위에 있는 요소를 제외한 요소들 상위요소
li태그의 부모 ul태그
li 항목들을 경계짓기 위한 부모태그 필요
부모태그 : ordered list
ol : 숫자가 앞에 써진다
부모태그 : unordered list
ul : 그냥 동그라미를 앞에 두는!!
압도적으로 ul이 가장 많이 쓰인다
팁 ) li* 3 + tab하면
<li></li>
<li></li>
<li></li>
이렇게 나온다 와우
ul 안에는 li 밖에 못오지만 li 안에는 다른 태그 전부 올 수 있다
텍스트는 p나 div 태그로 감싸주세용
CSS
태그들이 갖고 있는 고유값 초기화를 위해 reset.css 를 html파일에 link로 넣어주기
html과 다르게 head / body 구분이 없다
CSS는 옷을 입혀주는거얌
웹 페이지를 아름답게 만들고 싶어서!
html 어딘가에 이 옷을 입히겟다, 하는게 선택자
선택자 종류
선택자 selectors
- 태그 선택자 : 태그명만 쓰는 것
html : <li> ➡️ css : li
요러케만 써두 된다
CSS에서는 꺽쇠 꺼져!
- id 선택자
html : <header id = "header"> ➡️ css : #header
id 선택자는 중복 사용이 불가 ( 1번만 사용 가능)
근데 이 말 잘 모르겠음;;
- class 선택자 :
클래스 값이 ㅇㅇ인 태그 선택
그루핑, 하나로 묶는 용도
html : <div class="box"> ➡️ css : .box
클래스 선택자는 중복 사용 가넝
한 칸 띄고 다른 클래스 적기두 가넝 ( 띄어쓰기로 구분)
html: <div class="box clearfix"> 이런 식으루
-전체 선택자 : 아스테리스크 *
전체 세팅용
상속/ 역상속
부모가 자식/하위요소 상속하는 대표적인 것 : 폰트에 관한 애덜
자식의 높이를 부모가 역상속함
다중선택자: 똑같은값을 받는 애들 줄여쓰기
.topmenu01{
border: 1px solid palevioletred;
}
.topmenu02{
border: 1px solid greenyellow;
}
얘네를 쉼표 넣어서
.topmenu01, .topmenu02 {
border: 1px solid greenyellow;
}
요러케 하면 개별 항목을 or로 적용
근데
.topmenu01.topmenu02 {}
이렇게 공백없이 연결하면 모든 속성을 한 번에 적용시키니느 요소에만 지정설정 적용
여백값
- margin : 물리적인 힘으로 물체를 밀어 여백 생기도록
- padding : 몸집을 키우는 것 ( 실무용 )
margin:0 auto 마진으로 정가운데 보내기
FLOAT
블럭요소 사용 시 가로배치를 위해 사용하는 속성
float 사용 시, 자식이 부모에게 더이상 높이값 역상속하지 않음
이때 html 돌아가 클래스로 clearfix 를 주면 부모가 자식의 높이값 다시 역상속 가능
POSITION
웹의 기준점, 좌측 상단
1. static
2. absolute
left or right / top or bottom 값 넣어줘야해
ex)
position: absolute;
left:0;
top:0;
이 기준점이 되는 건 부모가 position 값 갖고 있을 때!
만일 부모에게 없다? 그러면 계속 상위요소들에게 물어보고 전부 없으면 브라우저 기준점인 좌측상단으로 잡게 된다.
싫으면 부무에게 position: relative; 주면 ㅇㅋㅇㅋ
absolute 가운데 정렬시
position: absolute;
left: 50%;
top: 50% ;
margin-left: -가로길이px/2;
margin-top: -세로길이px/2px;
기준점을 left와 top으로 했으면
마진에서 빼는 값도 lef와 top으로
* POSITION과 FLOAT
float 를 쓰려면 position 속성이 absolute나 fixed가 아니어야 한다.
position이 힘이 더 쎄다구 생각해
float이 적용되면 block 성질이 된다 ( 최상단 배치)
floating 엘리먼트들은 포지션이 지정된 블록과 지정되지 않은 블록 사이에 쌓인다
position 속성을 사용하면 요소들을 겹치게 할 수 있는데,
이 때 요소들의 수직 위치를 조절하는게 z-index
3. relative
4. fixed : 브라우저 중심
absolute 나 fixed 사용 시 블럭엘리먼트들이 독립 엘리먼트가 된다.
세팅값 초기화!
그래서 width값 입력 해야 함
opacity:0 or display: none; 하면 해당 요소 아예 끌 수 있음
근데 opacity 0으로 끄면 개발자 도구에 잡힘
그 자리를 차지하기는 하지만 안보일 뿐
display:none; 으로 하면 코드도 안보이게 된다
뒤에 다른 엘리먼트가 있더라도 선택가능
FLEX
부모에게 주기
flex는 축변경 가넝
flex-direction : row; 기본값이라 생략 가능
justify-content: 메인축 설정
flex-wrap:wrap;
줄바꿈 명령어
align-items 는 한 줄용
두 줄부터는 align-content로 가능
가상선택자 pseudo-class
section:hover > article {
display: block;
}
호버이벤트 사용 시 반드시 부모자식 태그여야 함
부모에게 주는게 좋아~
FONT
저장되어 있는 폰트 사용할거면
@font-face {
src: url("소스")format("");
font-family: '폰트이름넣기';
}
ex)
해당 폰트 적용 시
div {
font-family: '내가 위에서 지정한 폰트이름', 2번째후보 폰트, 3번째, .... ;
}
내가 지정한 폰트가 안 나올 경우에 대체할 후보들 컴마 뒤에 넣어주기
font-size에는 px 외에도 다른 단위들 넣을 수 있다
1em : 부모폰트의 100%
1rem: html 폰트의 100%
1 vh : viewport height, 높이값만큼
1vw: viewport width의 줄임말, 내 브라우저 좌우값만큼
'Scrap' 카테고리의 다른 글
| Vue.js 스터디 - 1) 기본 설정 및 반복문 (0) | 2022.05.19 |
|---|---|
| git 호스팅 - github pages로 웹 호스팅 하기 (0) | 2022.05.10 |
| HTML 에 대하여 _ 비전공자를 위한 HTML/CSS 코칭스터디 (0) | 2022.05.10 |
| HTML5 markup (0) | 2022.05.10 |
| Markup guide (0) | 2022.05.10 |
