개인공부
[기본기 만들기] HTML/CSS 입문
chsua
2023. 1. 16. 21:11
공부는 https://developer.mozilla.org/en-US/docs/Learn/HTML 으로 했다.
MDN은 영어로 되어있는데 한국어 번역으로 바꿔도 이해하기 쉽고
1부터 100까지 차근차근 정리가 되어있다.
그리고 무엇보다 돈이 들지 않는다.
그래서 아예 처음 입문한다고 하면 이걸로 공부하고 책 봐도 괜찮을 것 같다.
이거 한다고 한지가 언제인데 질질 끌어서.. 일주일 넘게 본 거 같다.
그렇게 오래 볼 것은 아닌데 하나하나 실험해보느라 늦었다.
하하
HTML, CSS의 기본적인 부분은 다 읽어보았지만, 하나 검색하고 하나 입력하고 하는 수준이다.
공부를 하며 직접 VSCode를 통해 HTML을 실험해보며 공부한 것을 작성하고, 그 HTML으로 CSS를 실험했다.
CSS는 따로 txt파일로 정리했다.
나름 정리한 내용은 실행시키면 이렇게 보이는데 한 화면에는 담기지 않아서 75%인 상태이다.
주소를 보면 "파일 | 경로"로 표기된다.
아래는 해당 사이트의 코드이다.
비교하면서 읽어보면 어떤게 어떤 식으로 보이는지 조금 이해가 될 것이다.
1. HTML: HTML로 HTML공부한 거 정리!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<header>
<h1>HTML practice</h1>
</header>
<div>
<h2>기본문법</h2>
<ul>
<li>block level(자동줄넘김) / inline level(줄넘김 X)이 존재. </li>
<li>div = block / span, a = inline</li>
<li>text를 쓰기 위해서는 내용 앞에 <P>, 뒤에 </P>를 써야 한다.</li>
<li>제목은 <h1~h6> 내용 </h1~h6></li>
<li><em>글씨 기울이기</em> = <em> 내용 </em>(의미O) 또는 <i> 내용 </i>(의미X) </li>
<li><strong>글씨 두껍게 쓰기</strong> = <strong> 내용 </strong>(의미O) 또는 <b> 내용 </b>(의미X)</li>
<li><u>글씨 밑줄치기</u> = <u> 내용 </u>(의미X) </li>
<li>순서없는 리스트 = <ul> <li> 내용 </li> </ul> </li>
<li>순서있는 리스트 = <ol> <li> 내용 </li> </ol> </li>
<li>description lists = <dl> <dt> 상위항목 </dt> <dd> 하위항목 </dd> </dl> </li>
<li>머리글자/약어를 설명 = <abbr title="해당내용 부가설명"> 내용 </abbr> </li>
<li>위첨자/아래첨자 = <sup> 위첨자 </sup>, <sub> 아래첨자 </sub> </li>
<li>기계가 읽을 수 있게 시간/날짜 표시 = <time datetime="형식"> 날짜/시간 </time> <strong>- 추가학습 필요</strong> </li>
<li>줄바꾸는 방법 =<br>, <hr> </li>
<li>비디오 넣는 방법 = <video>, 음성파일 넣는 방법 = <audio> (img와 같은 방식)</li>
<li>사진 넣는 방법 =
<ol>
<li> 기본: <img src="참조" alt="사진 나오지 않을 때 설명" width="숫자" height="숫자" title="사진제목"/></li>
<li> + figure/figcaption 사용하여 이미지를 묶고 설명하기</li>
<li> CSS를 사용하여 넣기 <strong>- 영어로 되어있어서 모르겠/추가학습 필요</strong></li>
</ol>
</li>
<li>숫자목록 다른 숫자로 시작하기 = <ol <u>start="4" reversed</u>></ol></li>
<li>숫자목록 다른 숫자로 시작하기2 = <li <u>value="숫자"</u>></li></li>
<li>표 넣는 방법 = <table>,<th>,<td>,<colgroup>,<col />,rowspan, colspan…</li>
</ul>
<hr>
<h2>Q. 궁금한점</h2>
<input type="text"> <button type="button">확인</button>
<dl>
<dt> \n기능으로 br과 pre는 무슨 차이일까 </dt><br>
<dt> div과 span는 무슨 차이일까 </dt>
<dd> : div = block level, span = inline level</dd>
</dl>
<br>
<hr>
<h2>참고사이트</h2>
<pre>
<a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML" target="blank">html 가이드 바로가기</a>
<a href="https://blog.munilive.com/posts/meta-tag-property-and-use-method.html" target="blank">meta tag 사용 가이드 바로가기</a>
<a href="http://www.tcpschool.com/html-tag-attrs/link-rel" target="blank">link 사용 가이드 바로가기</a>
<a href="https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table-fixed.html" target="blank">table 만들기 참고사이트 바로가기</a>
<a href="https://coding-factory.tistory.com/189" target="blank">span 참고사이트 바로가기</a>
<a href="https://www.nextree.co.kr/p8468/" target="blank">css 선택자 참고사이트 바로가기</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="blank">css 선택기 참고사이트 바로가기</a>
</pre>
</div>
</body>
</html>
2. CSS로 HTML 꾸며보며 실험하기
body {
background-color: #2c2c2c ;
/* background-image:url(취업사진.jpg);
background-repeat: repeat-x;
background-size: cover;
background-attachment:local; */
margin: 10%;
color: rgb(232, 232, 232);
}
h1 {
/* writing-mode:vertical-rl; */
color: bisque;
border-bottom: 1.5px solid bisque;
}
h2 {
color: rgb(231, 178, 152);
}
a {
display: inline-block;
background-color: rgb(52, 52, 52);
margin: 10px;
border: 10px;
color:rgb(244, 215, 169)
}
a:hover {
background-color: rgb(244, 215, 169);
color:#323232
}
div {
margin: 3%;
}
li {
line-height: 2;
}
ol li {
font-size: 0.9em;
line-height: 1.7;
}
button:hover {
font-weight: bold;
}
3. 사이트에는 적용되지 않은 CSS규칙 정리
(원래 txt파일인데 잘 안올라가져서 그냥 CSS로 작성.. 원래 이 문법 아님.. 그냥 전부 각주처리 해버림)
모든 내용이 있지 않고, 내가 공부하다가 기억해놓고 싶어서 정리한 거라 부정확한 부분도 있음! 그냥 참고!
/*
font {
font-family: // 전체 글꼴 지정
font-size:
font-weight: // 굵기
font-style: // 이텔릭체 설정
}
//외부폰트 적용하기
@font-face {
font-family: "폰트이름 지정"; //나중에 font-family:---하고 설정함
src: url("링크");
}
text, line, letter, word {
text-shadow: 오른쪽, 아래, 경계흐림, 그림자색상 // 단위 붙여야 함, 이중도 가능
text-align: // 글자정렬
text-transform: // 대소문자 변환 가능
text-decoration: // 글자위에 선긋기(위아래중간)
text-overflow: // 글자가 상자를 넘쳤을때 처리방법
line-height: // 행간 (단위 안 붙임, 2면 글씨크기의 두 배)
letter-spacing: //자간
word-spacing: // 어간
}
list {
list-style-type: // 글머리 기호 유형
list-style-position: // 글머리 기호를 글 내부에 넣을지 말지
list-style-image: // 글머리 기호 이미지로
list-style: //으로 속기 가능
}
background {
background-color:
}
box {
margin: //auto로 하면 중앙정렬됨
border:
padding:
height:
max-height:
min-height:
border-radius: //모서리 둥글리기
filter: drop-shadow(오른쪽, 아래, 경계흐림, 그림자색상) //단위 붙여야 함
float: left/rigth... // 하면 정상적 흐름에 벗어나 부모의 left/right.. 에 위치할 수 있음
> 만약 이로인해 줄바꿈 되는 것을 피하고 싶다면 clear: left/right/both 처리방법
> 만약 다른 것과 묶어서 배경을 처리하고 싶다면 display: flow-root;
}
display {
display: inline, block, inline-block, flex, grid 등 중 하나
display: flex
> 기본 나열은 행 나열, flex-direction: column하면 세로정렬 됨, reverse도 가능
> 만약 넘친다 그러면 부모에 "flex-wrap: wrap", 자식에 "flex: (최소넓이)"를 적음 자동으로 줄바꿈
> 배치하려는 요소의 상위 요소에 적용
> 부모는 flex 컨테이너, 자식은 flex요소가 됨 (가로 정렬 됨)
> flex-direction과 flex-wrap을 한번에 = flex-flow: row wrap;
> 부모의 높이를 자녀가 따라감(가로는 따라가지 않음)
> 자녀에게 "flex:1"을 입력하면 가로도 맞춰짐
> 특정 자녀에게 "flex:2" 하면 가로가 두 배가 됨
> flex: 비율 (최소가로길이)
> 부모에다가 align-items: center; 하면 부모 높이에 영향을 받지 않고 세로 중앙에 배치됨
> justify-content: space-around 하면 좌우에도 공백이 생기고 요소 사이에도 공백이 생김
> align-self: flex-start/end = 정렬을 시작점이나 끝점에 배치 (https://heropy.blog/2018/11/24/css-flexible-box/)
> order: 숫자를 통해 자녀 배치 순서 변경 가능 (기본은 0, 클수록 뒤에 배치)
display: table;
> 큰 폼에 display: table;
> 그 하위에 display: table-row;
> 근데 왜 행에 대한 margin이 여기서 안먹히고 table-cell에서 먹히지?
> 그 하위에 display: table-cell;
> 그 설명은 display: table-caption;
display: grid;
> 부모에 display:grid;
> flex처럼 보이는데 차이점이 뭐지?
> grid-template-columns: 로 행 내 요소 갯수/비율 설정
> gap: 로 요소간 사이 간격 조정
> grid-template(명시적- 정말 적혀진 순서에만 숫자 대입)/auto(암시적- 적혀진 숫자 적당히 모두 적용) - 근데 왜 grid-auto-columns 적용 잘 안 될까용?
> grid-row/column: (1, 1/3...)으로 칸 점유 설정할 수 있음
> 부모에 grid-template-areas: 하고 행열 맞춰서 "섹션"을 적으면 됨
> 그리드의 모든 셀을 채워야 합니다.
> 두 셀에 걸치려면 이름을 반복하십시오.
> 셀을 비워두려면 .(마침표)를 사용하십시오.
> 영역은 직사각형이어야 합니다. 예를 들어 L자형 영역은 사용할 수 없습니다.
> 영역은 다른 위치에서 반복될 수 없습니다.
}
ect {
linear-gradient(방향[to right], blue, pink); 선형 그레디언트
url(): 외부에서 끌어오기
column-count/-width: 단 만들기 (한글 2단, 3단..)
> column-gap: margin 같은 느낌
> column-rule: 두께(단위O) double.. 색깔 //로 단 사이의 규칙을 정할 수 있음
> 만약 각각의 요소가 쪼개진다면 자식요소에 break-inside: avoid; 추가
A요소: nth-of-type(n번째){} = A요소 n번째에 대한 설정
A요소: first-child{} = A요소 1번째 자식에 대한 설정
repeat(A, N): A를 N번 반복
반응형 디자인/미디어쿼리...(이후 모든 것) ****************더 공부해야함/ 안 보고 넘어감*************************
}
a {
a:link{} // 링크
a:hover{} // 마우스 커서 올려논 상태
a:visited{} // 방문한 사이트 처리
}
grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; // 행 (fr로 하면 비율로 적용됨 1:1:1:1)
grid-template-rows: 100px 100px; // 열 (px로 하면 길이 설정)
gap: 10px 10px; //각 frame 사이 간격 (행 사이 간격, 열 사이 간격)
https://studiomeal.com/archives/533
}
grid box {
grid-column:
grid-row:
}
position {
position: static; // 기본값
position: relative; // 상대적 포지셔닝으로 전환 (원 위치에서 이동)
position: absolute; // 절대적 포지셔닝으로 전환 (원 페이지에서 이동)
position: fixed; // 절대 위치 (absolute와 유사, 스크롤에 고정)
> 위 3개는 top/right/left/bottom으로 이동 가능
position: sticky; // 상대+절대 (스크롤 끝에 도달해야 이동)
> top으로 효과 적용 가능한 거 같은데 뭔 이야긴지 잘 모르겟..?
> 쇼핑몰 같은데 옆에 존재하는 팝업바, 사전 같은거 만들때 사용되는 듯
}
*/