<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 웹페이지 제목을 입력 </title>
</head>
<body>
안녕 HTML!
<!body>
</html>
자동입력
! 엔터
html:5 엔터
<h1>
<h2>...
<p>
<br> paragraph 안에서 줄넘김 태그
<a href="url입력"> 하이퍼링크 </a>
<img src="이미지 주소 입력">
<div> 구역 나누기
<span> 단락 안에서 구역 나누기?
꺽쇠 < > 는 태그로 인식해서 출력되지않음
< <
> >
로 대체해서 쓴다
CSS style 넣기
<div style="background-color : # ~~~~~~ ">
style의 속성값으로는 :
background-color : #000000
color : #000000
font-family :
font-size : 00 px
font-weight : 100~ 900
text-align : center/right/left
width: px or %
height: px or %
padding : px (안쪽여백 세로->가로: 시계방향으로 외우기)
padding : 16px 8px 24px 10px;
<=>
padding-top : 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;
margin: px (바깥쪽 여백 세로->가로) auto 는 가로에서만& 너비가 정해있을때만 동작
margin-속성 동일
border: 굵기px 종류(solid, dotted, dashed) 색상
border-radius: px 클수록 둥글게(라운드값)
border가 없더라도 border-radius 값을 주어서 영역 모서리를 둥글게 할 수 있음
%값으로도 줄 수 있고, 각각의 모서리를 다르게 설정도 가능하다
line-height : font 크기 대비해서 지정됨 (1, 1,5, 1,7 ...)
text-decoration : 밑줄(underline) 취소선(line-through) 없음(none: a 태그에서 밑줄 없앨때)
background-image: url('pizza.png') 경로 넣기
background-repeat: no-repeat/repeat-x/repeat-y ...;
background-position: center;
background-size: cover/contain/... ;
background-image: linear-gradient(90deg, 색상1 원하는%, 색상2), url( ) ;
▷ 구글 'gradient generator'
색상 피커로 편하게 코드 가져오기 가능 (각도조절, 투명도, 등등)
gradient 넣고 그 뒤에 , 이미지url 넣으면 겹쳐서 쓸수있다
box-shadow: 가로px 세로px 블러px 퍼지는정도px raga( ) : 중간에 콤마 없음
box shadow generator 활용 가능
opacity : 요소 전체의 투명도를 조절 (불투명도 0 ~ 1)
각각의 CSS 규칙 은
선택자 { 와 중괄호 로 이루어져있고
CSS 선언 은 속성과 속성 값으로 이루어져있다.
}
<style> 태그 안에 규칙 생성하기
h3{
적용할 규칙
}
-> html 코드 내 모든 h3(선택자) 에 동일한 규칙 적용
h1, h2, h3, p ...
id = "~"
#id명 스타일 지정 : 한개씩 개별 지정
class = "~" 동일 클래스를 각각 넣어주고
.class명 으로 한번에 스타일 적용할수있다
<style> 태그 안에 있던 내용은 따로 style.css 파일 만들어서 옮겨주고
html 파일에는
<link rel="stylesheet" href="style.css"> 로 연결
색상표기법
1. 색깔 이름으로
2. 색상코드로 #000000 ~ #ffffff (R,G,B x 2자리 16진수)
3. rgb(0~255, 0~255, 0~255)
4. rgba (0~255, 0~255, 0~255, 0~1) 마지막 숫자 alpha는 투명도를 조절
크기 단위
pixel -> 해상도 resolution
PPI pixel per inch
퍼센트
em 대문자 M의 크기를 1em으로 가정
rem 최상위태그의 크기(html) 를 rem으로 가정
box-sizing
width => content의 너비 기준
+ padding + border => box 너비
컨텐츠+테두리 합친 값으로 크기를 설정하고싶으면
box-sizing: border-box;
속성을 넣어주면됨
모든 요소에 동일 설정값 넣고싶을때 * 사용
*{
속성값
}
overflow:
hidden;
scroll;
auto;
박스 밖으로 넘치는 내용을 숨기거나 스크롤
white-space:
nowrap; => 줄바꿈을 하지 않는다
-> 가로로 오버플로우 발생
overflow: scroll; => 가로로 스크롤 생성
웹 기본 설정은 overflow 가 발생하게 되어있음
마진 상쇄 Margin Collapsing
이웃하는 요소 or 부모-자식간에 세로 마진은 각각이 아니라 겹쳐져서 (큰 값으로) 나타날 수 있다
부모 요소에 border 나 padding 이 있으면 상쇄되지않음
display
block : p태그, h태그, div태그, 너비와 높이 지정. 위에서 아래로 채워진다
inline : 글쓰는 방향으로 채워짐. 크기를 정할 수 없음
(예외: img와 같이 외부 데이터를 보여주는 태그), 여백도 가로로만 가능
inline-block: 배치는 inline 이지만 block 처럼 크기 속성을 갖는다
float : right; / left;
삽화를 넣듯이 배치할 수 있다.
css에서
여러개의 선택자에 같은 규칙을 정해줄 때는 선택자 콤마(,) + 엔터 (선택사항) 선택자 로 선택자 목록Selector list을 만들어준다.
=> (or 조건)
.class1,
.class2{
}
html에서 여러 class 지정하기
따옴표 안에 스페이스로 구분해주면 2개의 클래스가 적용된다
<p class="first second">
css에서 선택자 붙여쓰기 (말그대로 붙여쓰면됨)
여러개 선택자(태그(p, h1, ..., )id, class)를 (and 조건으로) 동시에 갖고 있는 요소에 스타일 적용
p.class.class2#id{
}
> 자식 결합자 :
동일한 이름의 클래스명이 있을때 원하는 선택자만 스타일 적용하게 도와줌
부모 바로 아래 자식에만 적용됨
부모 선택자 > 자식 선택자 {... }
.부모class > * { ...} : 부모 아래 모든 자식 선택
자손 결합자 (space) :
.parent .son{ ...}
부모아래 전체 son class 선택자에 적용됨
n번째 자식 선택자
.class :nth-child( ) {...}
( ) 안에는 숫자, odd, even, 2n... (1부터 시작임)
첫번째, 마지막 자식은 별도 표기 가넝
.class :first-child{ ...}
.class :last-child{...}
가상 클래스
:hover
:active
:focus
:visited
a:hover{ => a 태그에 마우스 올려놨을때 (한시적으로)스타일 변경
color: #~
}
개발자 도구에서 확인 가능
https://memoryelim.tistory.com/45
Cascading이란?
CSS (Cascading Style Sheets) 라는 이름에서부터 알 수 있듯이(몰랐지만?) 최종적으로 적용할 CSS속성을 결정할때 CSS 규칙을 순서에 따라 합쳐서 적용한다.즉 우선순위가 높은 규칙을 우선적으로 적용
memoryelim.tistory.com
항공사에서 티켓 조회하는 화면 실습까지 완료하였다
아무리 손대도 안되는 부분이 있었는데 바로바로 오타때문이었다 ^_ ^
class=" " 에서 =를 빼먹거나
img src 를 scr로 빼먹어서 코드가 제대로 안먹힌거였다.
'개발 공부 일지 > HTML_CSS' 카테고리의 다른 글
| input:focus border 스타일 지정이 안된다면? (0) | 2024.07.10 |
|---|---|
| Font awesome 적용하기 (0) | 2024.07.08 |
| CSS : 레이아웃 (0) | 2024.07.05 |
| HTML 핵심개념 (0) | 2024.07.04 |
| Cascading이란? (0) | 2024.07.04 |
