HTML 자 들어갑니다 + CSS도 추가요

차곡·2022년 3월 6일
0

html이 뭔가요?
웹사이트의 구조를 담당하는
프로그래밍 언어의 한 종류로 뼈대 역할을 맡고 있습니다.

파일을 만든 뒤 .html을 생성
!를 누른 뒤 엔터를 치면

<html lang="ko(원래 en인데 ko로 바꿔줘야함)">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>사이트 이름</title>
</head>
<body>
    
</body>
</html>

이렇게 된다 정말.. very 편하다

(지금 구글에 검색해 보니 다르게 나와서 당황
다음에 메타 요소에 대한 글도 적어야겠다)

<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p> 
<br> 줄 바꿈
<div>구역을 나눠요</div>
<span>꾸밀 때 자주 써요</span>
<!--제목을 나타내요--> 
<h1><h2><h3><h4><h5><h6>
<p>단락을 나눠요</p>
<br>강제로 문단을 나눠요</br>
<!--command+/ 주석을 달아요--> 
<b>굵게</b>
<I>이탤릭체</i>
<u>밑줄</u>
<s>중간선</s>
<a href=“링크”>현재 화면에 외부 페이지 표시</a>

<ul>순서와 상관 없는 리스트</ul>
<ol>순서가 필요한 리스트</ol>

<ul> <li> </li> </ul>
<ul>, <ol> 태그의 자식으로는 <li> 태그만 가능
<img src="이미지 경로" alt="이미지를 대체하는 텍스트">
<input> 내용이 없는 빈 요소
<select> 선택지 리스트 형태로
<button> 버튼 만들 때 사용
<!--시멘틱 마크업--> 

<strong> 중요한
<em> 강조하는
<ins> 새롭게 추가
<del> 삭제된

css 추가 들어갑니다

전체 선택자 *{}
class 선택자 .~{}
id 선택자 #~{}

선택자는 다르지만 요소가 겹치는 경우
id 선택자 > class 선택자 > 태그 선택자

font-family 글꼴
font-size 글자 크기
{px 절대적인 크기
 rem <html>태그의 font-size에 대응하는 상대적 크기
 em 부모 태그의 font-size에 대응하는 상대적인 크기}
content: width, height
padding: padding-top/bottom/left padding/right padding
border: border-width
margin: margin-top/bottom/left margin/right margin
content-box: (기본값)content 영역만 포함
border-box: border과 padding까지 포함
position
static 기본 값
relative 자신의 원래 위치를 기준으로 위치를 변경하고 싶을 때 사용
absolute 부모 기준으로 위치 좌표를 잡는다
fixed 브라우저 전체를 기준으로 잡는다

그리고 마지막으로 날 애태우는 가상 클래스

hover 마우스를 위에 올린 상태
active 마우스로 클릭한 상태
focus 위치해 선택된 동안의 스타일 지정
근데 input 같은 애랑 같이 있어야함...ㅋ
profile
기획과 개발을 배워요.

0개의 댓글

관련 채용 정보