240103 - HTML, CSS 학습 후 sencha에 적용, 소스트리 학습

dodo1320·2024년 1월 8일

CSS Sencha frontend html

프론트엔드(240102~)

목록 보기

2/26

HTML 강의 - 1

유튜브 강의

HTML 기초, React 할때 꼭 필요한 팁! 쉽다고 무시하면 안돼요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

HTML(HyperText Markup Language)

마크업 언어 사용 - 구조적으로 작성
<> : tag
tag 사이에 content 작성함
자식 tag 가능

html, css 연습할 수 있는 사이트

JS Bin

HTML 구조

<!DOCTYPE html> : html 선언
html은 head, body로 구성됨
head : title, 부가설명, 제목, 아이콘, css 파일 연결, meta 정보만 있음
body : 사용자에게 보여지는 최상위 container, tag로 이루어져 있음
mdn : 웹 개발 설명 사이트
html element reference : 현재 사용되고 있는 tag들에 대한 설명
attributes : tag 안에서 tag와 함께 사용할 수 있는 속성
document and website structure : 웹사이트 구조에 대해 설명하고 있는 mdn 페이지
header, nav, aside, main(section, article), footer 등
유효한 tag를 사용했는지 확인하는 방법 : validator.w3.org 웹사이트 사용
코드 붙여넣어서 check

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
</head>
<body>
	<h1>Heading</h1>
	<h2>Heading</h2>
	<button>click</button>
</body>
</html>

HTML 강의 - 2

유튜브 강의

HTML 태그 완성, 웹 포트폴리오 만들기 전에 꼭 보세요 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

tag 종류 - box, item

box : header, footer, nav, aside, main, section, article, div, span, form
article : 재사용 가능한 것을 묶어놓은 것
div : 묶어서 스타일링할 때 / 매우 흔하게 쓰임
item : a, button, input, label, img, video, audio, map, canvas, table
- item 종류 : block, inline
  block 레벨은 한 줄에 하나
  inline 레벨은 공간이 허용되면 다른 tag 옆에 배치 가능
element : tag와 content 전체
tag 완성 단축키 ctrl+e
ol>li*3 작성 후 tab 누르면 자동완성됨
list : 리스트 작성 tag
input : 사용자에게 input 받을 때 사용하는 tag
label과 같이 사용

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
</head>
<body>
	<!--Box-->
	<header></header>
	<footer></footer>
	<section></section>
	<div></div>
	<span></span>
	<!--Item-->
	<h1>H1</h1>
	<button></button>
	<a href="https://www.google.com/?&hl=ko" target=_blank>click</a>
	<!--block vs inline-->
	<p>This is a sentence. <b>That</b> is</p>
	<p>This is a sentence. <span>That</span> is</p>
	<!--div는 block 레벨-->
	<p>This is a sentence. <div>That</div> is</p>
	<!--list : ol, ul, li-->
	<ol type='I' reversed>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ol>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<!--input-->
	<label for="input_name">Name: </label>
	<input id="input_name" type="password">
</body>
</html>

CSS 강의 - 1

유튜브 강의

CSS 셀렉터, 기초 이론 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

CSS(Cascading Style Sheet)

author style : css 파일
user style : 사용자가 지정한 스타일
browser : 브라우저가 기본으로 지정한 스타일
important : 일순위로 지정되는 스타일
selectors(선택자) : 어떤 tag를 고를지 선택하는 방법
- : 모두
  tag이름 : 그 tag만
  #id : 해당하는 id
  .class : 해당하는 class
  : - tag옆에 다는 것
  [ ] : 해당하는 attribute만
여러 선택자 혼합해서 사용 가능
padding : content 안에 들어가는 space
margin : contents 밖에 들어가는 space
css reference에서 확인

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
</head>
<body>
	<ol>
		<li id='special'>First</li>
		<li>Second</li>
	</ol>
	<button>Button 1</button>
	<button>Button 2</button>
	<div class='red'></div>
	<div class='blue'></div>
	<a href="[naver.com](http://naver.com/)">Naver</a>
	<a href="[googlenaver.com](http://googlenaver.com/)">Google</a>
	<a>Empty</a>
</body>
</html>

/* selector {
property: value;
} */

/* universal */
* {
color: green;
}

/* type selector */
li {
color: blue;
}

/* id selector */
#special {
color: pink;
}

/* class selector */
.red {
width: 100px;
height: 100px;
padding: 20px;
margin: 10px;
border-width: 2px;
border-style: solid;
border: 2px dashed red;
background: yellow;
}

/* state selector */
button:hover {
color: red;
background: yellow;
}

/* attribute selector */
a[href] {
color: purple;
}

a[href^='naver'] {
color: blue;
}

a[href$='.com'] {
color: red;
}