TIL-(퍼블리싱) -1

hoin_lee·2023년 4월 14일

TIL

목록 보기

166/236

처음 기초부분은 대부분 아는 거지만 정리겸 작성

Publishing

p태그 사용시 주의 사항 : <p><p> 입력후 사이에 바로 입력시 하나로 인식해서 문단 접기가 안된다. 꼭 사이에 엔터키 한번 쳐서 구분시킨뒤에 진행하자

br은 특별하지 않으면 사용 X

font-size는 CSS에서 지정하지 않으면 16px이 기본 값이다

big 태그는 HTML 표준에서 제외되었다.

HTML 핵심 태그 (목록 만들기)

순서가 있는 목록 : ol > li ( ol:Ordered List)
순서가 없는 목록 : ul > li ( ul:Unordered List)

HTML 핵심 태그 (링크 ,이미지)

외부 링크나 파일 링크하기 : a (anchor)
- href(hyperlink reference) : 보통 url(하이퍼링크)가 들어간다.
- _blank : 새탭으로 창 띄우기
- title : 속성 값 마우스 hover시 표시
이미지 html 문서에 넣기 : img
- src(source) : 이미지 파일 경로
- alt : 대체 텍스트 (요즘 이미지 업로드 실패가 거의 없어서 잘 사용안하지만 시각장애인이 이용할 경우 alt 태그를 ai가 읽어준다)

시작태그와 마감 태그는 유지하며 메인 속성을 앞 부수적인 속성을 뒤에 배치하자(실제로는 순서에 큰 상관은 없다)
링크와 이미지 중첩하기 : a > img
<a href="http://...."><img src="..."></a>

CSS 필수 이론

CSS(Cascading Style Sheets) : HTML 문서 내에 HTML 태그를 선택해서 디자인하고 배치하는 역할
CSS 링크 - 내부 CSS 구문 작성 : html 파일의 <head>...</head>사이에 `로 CSS시작
CSS 링크 - 외부 CSS 파일 : html 파일의 <head>...</head>사이에 css파일 링크
<link rel="stylesheet" href="...">

CSS 기본 문법

body : {
	color: navy;
    }

body : selector
color : property
navy; : value
각 속성 마지막마다;꼭 필수
되도록 html 계층 구조를 지켜주자(부모요소랑 자식요소)

CSS 선택자

태그 선택자

p {
    font-size: 35px;
    color: blue;   
}

클래스 선택자

.center {
  text-align: center;
  color: red;
}

아이디 선택자

#center {
  text-align: center;
  color: red;
}

태그와 함께 쓰는 선택자

p.center {
  text-align: center;
  color: red;
}

그룹 선택자

h1 , p {
    text-align: center;
}

하위 선택자

p span {
    text-align: red;
}

전체 선택자

* {
    font-size: 14px;
    line-height: 24px;
}

CSS 적용 우선순위

!important Style
Inline Style
ID Selector Style
Class Selector Style
Tag Selector Style

동일한 CSS 속성이 중복 사용되는 경우 스타일은 위 순위에 따라 적용된다.

EX) 중복된 선택자가 있는 경우 외부스타일 CSS 우선순위

적용된 결과에 따라 스타일 우선순위 확인 - 내부 파일 스타일 > 외부 파일 스타일

중복된 선택자가 있는 경우 내부 스타일 CSS 우선순위

적용된 결과에 따라 스타일 우선순위 확인 - !Important > 인라인 > 아이디 > 클래스 > 태그

!important 는 쓸일이 많지 않은데 문제를 봉착 했을 때 도대체 어디서 css가 충돌나는지 찾기 어려워 못 찾겠으면 사용!

CSS 속성과 값

CSS 속성과 값은 영어단어 뜻 속에 담겨 있다.

overflow(넘치다,범람) : hidden;(감춰진,숨은)
- 속성과 값: 내용이 요소의 크기를 벗어났을 때 : 감추기
background(배경)-attachment(부착, 첨부) : fixed(고정된)
- 속성과 값 : 스크롤할 때 배경 이미지 부착 여부를 지정 : 움직이지 않고 고정

CSS 서식 관련 속성 : 폰트사이즈

표계산 사이트

주로 픽셀을 사용하고 line-height 사용할 때 em을 거의 사용(line-height를 px로 할경우 폰트사이즈가 바뀔 때마다 바꿔줘야함)
일반적인 가독성은 body 서식은 15px을 사용한다.
rem은 반응형 때 거의 사용

font-size : 텍스트 크기를 지정하는 속성
- value : px em pt % rem
font-weight : 글꼴 두께를 지정하는 특성
- value : 100~900 bold bolder lighter normal(400=normal, 700=bold)
line-height : 줄 간격을 지정하는 특성
- value : px em pt % rem
font-family : 글꼴을 지정한는 속성
- value : 'font name'
font-style : 문자 스타일(기울림체)
- value : normal italic oblique
color : 글꼴 색을 지정하는 특성
- value : color name #000000 rgb(0,0,0) rgba(0,0,0,0.5)<마지막은 투명도>
text-decoration : 텍스트 줄 표시 / 제거
- value : none underline overline line-through
text-transform : 텍스트를 대문자 및 소문자로 변환
- value : none capitalize uppercase lowercase
text-align : 문자 정렬 방법을 지정하는 속성
- value : center left right justify(양쪽정렬)
text-shadow : 텍스트 그림자 효과
- value(1) : [x-축거리][y-축거리][퍼짐 거리 정도][색상]
- value(2) : none

CSS 서식관련 속성 : 목록 스타일

HTML 부모요소 vs 자식요소, CSS 자손선택자(스페이스) vs 자식선택자(>)

<div class="parent"> <!--부모요소-->
  <div class="child"><!--자식요소-->
    <div></div><!--자손요소-->
  </div>
</div>

.box div {
    border: 1px solid blue;
    width: 200px;
    height: 200px;
    padding: 20px;
}
.box >div {
    width: 50px;
    height: 50px;
    background-color: #000;
}