기초지식

HTML

HTML이란, 웹컨텐츠의 구조와 의미 결정. 웹브라우저 상에서 보여지도록 디자인된 문서.

HTML의 구조

<!DOCTYPE html>
<html>

 <head> //제목, 아이콘, CSS파일 연결
 	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title> 프론트엔드 타이틀 </title>
 </head>
 
 <body>//사용자에게 보여지는 파트
 
 </body>
 
</html>

태그를 사용하여 웹페이지를 만들면 브라우저 상에서 구현됨.
MDN(https://developer.mozilla.org/ko/)
vaildator(https://validator.w3.org/)
웹사이트 구상 참고
(https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)

💭웹사이트를 보고 박스를 그려라
💭큰그림을 먼저 보자

HTML 태그

박스가 되는 태그      아이템이 되는 태그
header              a
footer              button
nav                 input
aside               label
main                img
section             video
article             audio
div                 map
span                canvas
form                table

태그는 block/inline으로 나뉨

<a></a> 링크 삽입
<p></p> 문단 정의
<ol, ul, li> </ol, ul, li> 리스트 생성. ol은 순서가 있고 ul은 순서가 없음.
<input> 사용자에게 값을 입력 받음. 보통 id를 이용하여 고유한 식별자를 줌. type이 다양함.
예)
	<label for="input_name">Name: </label>
	<input id="input_name" type="text">

CSS

의미와 정의

cascading style sheet

선택자

*: 모든 태그를 고름
태그이름: 그 태그만 고름(태그 옆에 ':'를 이용하여 state 정의 가능)
#id: 해당 id만 고름
.class: 해당 class만 고름
[ ]: 해당 속성 값만 골라 작성

💭selector 연습 게임(https://flukeout.github.io/)

스타일링

display&position

block level vs inline level의 기본값을 바꿀 수 있는 것이 display
inline: 물건
inline-block:상자인데 한 줄에 여러개
block:한 줄 당 하나 들어가는 상자

position: 마음대로 위치 조정. 기본값으로 static 사용.
relative: 원래 있는 자리에서 상대적으로 이동.
absolute: 담겨있는 박스 안에서 그걸 기준으로 위치 변경.
fixed: 상자에서 벗어나 페이지 상에서 이동.
sticky: 위치 변경은 되지 않으나 스크롤이 되어도 그 자리에 유지.

💭이용할 수 있는지 확인(https://caniuse.com/)

flex box

contanier에 들어가는 속성값   item에 들어가는 속성값
display                     order
flex-direction              flex-grow
flex-wrap                   flex-shrink
flex-flow                   flex-basis
justify-content             align-self
align-items
align-content

💭개구리 게임(https://flexboxfroggy.com/#ko)

HTML과 CSS 작성요령

emmet

!작성 후 Tab: HTML기본 코드 작성
div 작성 후 Tab:<div></div>
div.class 작성 후 Tab: <div class="class"></div>
div#id 작성 후 Tab: <div id="id"></div>
부모 형제 노드:
'>' 사용하여 부모 노드 작성.

div>ul>li
<div>
        <ul>
            <li></li>
        </ul>
</div>

'+' 사용하여 형제 노드 작성.

div>ul+ol
<div>
        <ul></ul>
        <ol></ol>
</div>

'*' 사용하여 반복 작성.
'^' 사용하여 바로 이전 부모에 형제 노드 작성.

div>ul>li^ol

<div>
        <ul>
            <li></li>
        </ul>
        <ol></ol>
</div>

'( )' 사용하여 그룹화.

div>(header>ul>li*2>a)+footer>p

<div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
</div>

'{}' 이용하여 텍스트 작성.

p{hello}
<p>hello</p>

'$' 사용하여 숫자 자동 할당

p.class${item $}*5

<p class="class1">item 1</p>
<p class="class2">item 2</p>
<p class="class3">item 3</p>
<p class="class4">item 4</p>
<p class="class5">item 5</p>

Author And Source

이 문제에 관하여(HTML과 CSS 기본), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jgyeyang/포트폴리오-웹사이트-클론코딩-1

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

HTML과 CSS 기본