개발노트

Javascript 들어가기 전 [HTML], [CSS] 한방에 정리 본문

웹 개발/Javascript

Javascript 들어가기 전 [HTML], [CSS] 한방에 정리

mroh1226 2023. 5. 8. 14:36
반응형

HTML

HyperText Markup Language의 약자로, 웹 페이지의 구조와 콘텐츠를 정의합니다.

HTML을 사용하여 제목, 단락, 목록, 링크 등의 요소를 생성할 수 있으며, 이러한 요소들은 웹 페이지의 구조를 결정합니다. 또한, HTML은 웹 페이지의 시맨틱 마크업을 가능하게 하여 검색 엔진 최적화(SEO)를 할 수 있도록 합니다.

파일은 .html 로 작성되어야합니다.

 

1. Tag (태그)

<p>Hello Googling Developer</p>

꺾쇠 괄호 (angle brakets) 안에 형식을 나타내는 p, h1, h2, img 등을 작성하여 <형식>시작태그를 열어줍니다.

닫을 때는 슬래시를 형식 앞쪽에 입력하여 </형식>종료태그로 닫아줍니다.

콘텐츠 내용은 시작태그와 종료태그 사이에 작성해줍니다. 

*<img/>와 같이 종료태그가 없는 Self Closing Tag들도 있습니다.

 

2. Attributes (속성)

<a href="https://dhonggyuoh.github.io/AboutMe/">AboutMe</a>

속성은 추가정보를 입력하여 a형식의 href 속성과 같이 링크를 제공할 수 있습니다.

속성은 시작태그 안에 작성합니다.

 

태그에 들어가는 형식의 종류와 속성은 모두 외울 필요없으며, 아래링크에서 찾아서 사용하시면됩니다.
- 참고링크: https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이

developer.mozilla.org

 

3. Html 문서 작성의 시작

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="구글링 개발자의 블로그입니다." />
    <meta property="og:image" content="images/cat.jpg" />
    <link rel="icon" sizes="16x16 32x32 64x64" href="images/cat.jpg" />
    <title>구글링개발자</title>
  </head>
  <body>
    <div>브라우저에 노출시킬 콘텐츠들은 바디에 작성해주세요.</div>
    <span>이렇게 말이죠.</span>
  </body>
</html>

<!DOCTYPE HTML>

:브라우저에게 이 문서가 html로 작성되어 있는 문서라는 것을 알려줍니다.

 

<html>

:HTML 문서의 최상위 요소이며, 문서의 전체 내용을 감싸고 있습니다.

lang 속성은 문서의 언어를 지정하는 데 사용되며, 위 예제에서는 한국어(ko)를 사용하겠다고 지정되어 있습니다.

 

<head>

:문서의 메타데이터를 포함하는 데 사용됩니다. 메타데이터는 브라우저가 문서를 처리할 때 사용되는 정보입니다.

  • <meta charset="utf-8" /> : 이 태그는 문서의 문자 인코딩을 지정하는 데 사용됩니다. utf-8은 모든 문자를 처리할 수 있는 범용적인 문자 인코딩입니다.
  • <meta name="description" content="구글링 개발자의 블로그입니다." /> : 이 태그는 문서의 메타데이터 중 description을 지정하는 데 사용됩니다. description은 검색 결과에서 표시되는 짧은 문장으로, 해당 문서의 내용을 요약하는 용도로 사용됩니다.
  • <meta property="og:image" content="images/cat.jpg" /> : 이 태그는 Open Graph 프로토콜을 사용하여 소셜 미디어에 링크를 공유할 때 사용됩니다. og:image 속성은 페이지의 대표 이미지를 지정하는 데 사용됩니다.
  • <link rel="icon" sizes="16x16 32x32 64x64" href="images/cat.jpg" /> : 이 태그는 웹 페이지의 아이콘을 지정하는 데 사용됩니다. rel 속성은 아이콘을 지정하는 데 사용되며, href 속성은 아이콘의 파일 경로를 지정합니다. sizes 속성은 아이콘의 크기를 지정하는 데 사용됩니다.
  • <title>구글링개발자</title>: 은 웹페이지의 타이틀을 설정합니다.

icon과 title이 적용된 모습

<body>

브라우저를 통해 contents 를 보여주는 부분으로 보여줄 콘텐츠들을 body 태그안에 작성해야 노출됩니다.

 

4. 시맨틱(Semantic) 마크업

  • 시맨틱(Semantic) 마크업은 웹 페이지에서 각 요소가 문서 구조 내에서 어떤 역할을 하는지를 명확하게 표시하는 마크업 방식입니다. 이는 검색 엔진 최적화(SEO)와 웹 접근성을 개선하고, 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.
  • 예를 들어, <div> 요소는 아무 역할도 가지지 않는 범용 컨테이너로서, 마크업을 할 때 의미적으로 어떤 역할을 하는 지 알 수 없습니다. 이 때문에 검색 엔진은 해당 내용이 어떤 내용인지 정확하게 파악하기 어려울 수 있습니다. 시맨틱 마크업에서는 <div> 요소보다는 더 구체적이고 의미적으로 명확한 태그를 사용합니다. 몇 가지 예시를 들면:

    <header> : 문서 상단의 헤더를 나타냅니다.
    <nav> : 내비게이션을 나타냅니다.
    <main> : 문서의 주요 콘텐츠를 감싸는 요소입니다.
    <article> : 본문을 나타내는 요소입니다.
    <aside> : 본문 이외의 보조 정보를 나타내는 요소입니다.
    <footer> : 문서 하단의 푸터를 나타냅니다.

  • 이러한 시맨틱 요소들은 해당 콘텐츠의 의미를 명확하게 표현할 수 있습니다. 또한, 이러한 요소들을 사용하면 웹 접근성이 개선되며, 검색 엔진 최적화(SEO)에도 도움이 됩니다.

 

5. Block과 Inline

  • Block
    Block 요소는 기본적으로 수직 방향으로 쌓이며, 부모 요소의 전체 너비를 차지하려는 경향이 있습니다.
    Block 요소는 <div>, <h1>~<h6>, <p>, <ul>, <ol>, <li> 등이 있습니다.
    Block 요소는 width, height, margin, padding 속성을 모두 가지며, 기본적으로 줄바꿈이 일어나기 때문에 다른 요소들과 세로로 쌓입니다.
  • Inline 요소
    Inline 요소는 수평 방향으로 쌓이며, 내용의 크기에 맞게 너비가 지정됩니다.
    Inline 요소는 <span>, <a>, <img>, <strong>, <em> 등이 있습니다.
    Inline 요소는 width, height 속성을 가지지 않으며, margin-top, margin-bottom, padding-top, padding-bottom 속성을 가지지만, 세로 방향의 크기는 설정할 수 없습니다.

*CSS를 통해 Block을 Inline형태로 Inline을 Block형태로 바꿔줄 수 있습니다.

 

 

6. 입력을 위한 태그

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
</form>
  • <form>
    : 사용자 입력을 받기 위한 요소입니다. 이 요소를 사용하여 사용자가 입력한 데이터를 서버로 보내거나, 웹 페이지에서 처리할 수 있습니다. <form> 요소는 action 속성과 method 속성을 사용하여, 데이터를 보낼 대상 URL과 전송 방식을 지정할 수 있습니다.

  • <input>
    : 요소는 사용자 입력을 받기 위한 여러 가지 유형의 입력 요소를 생성합니다. 이 요소는 type 속성을 사용하여 다양한 유형의 입력 요소를 생성할 수 있습니다. 예를 들어, type="text"를 사용하면 일반적인 텍스트 입력 필드를 생성할 수 있고, type="password"를 사용하면 패스워드를 입력받을 수 있는 필드를 생성할 수 있습니다.

  • <label>
    : 요소는 입력 요소에 대한 설명을 제공합니다. 이 요소를 사용하면 사용자가 입력 요소를 더 쉽게 이해할 수 있습니다. for 속성을 사용하여 연결되는 입력 요소의 id 값을 참조합니다.
    위의 코드에서, for 속성은 id="username"인 <input> 요소와 연결됩니다. 이를 통해 스크린 리더 등 보조 기술을 사용하는 사용자는 입력 필드와 해당 설명을 쉽게 연결하여 이해할 수 있습니다.

 

CSS

Cascading Style Sheets의 약자로, 웹 페이지의 디자인과 레이아웃을 정의합니다.

CSS는 HTML로 작성된 태그들의 색상, 크기, 움직임, 위치등의 스타일을 지정하여 배치하고 시각정 표현을 결정합니다.

또한, 미디어 쿼리를 이용하여 미디어  Screen 크기 등 유형에 따라 다른 스타일을 적용할 수 있으며, 반응형 웹 디자인을 구현하는 데 매우 유용합니다.

브라우저가 CSS 코드를 읽을 때 cascading 방식으로, 즉 위에 있는 코드부터 차례차례로 적용됩니다.

(따라서 같은 태그의 스타일을 정의한 코드가 있다면 맨마지막 코드가 적용되겠죠?)

 

1. CSS 작성법 2가지

  • <head> 태그 안에 작성하기
    css를 작성하는 방법 중 하나는 <head> 태그 안에 <style>태그로 작성하는 방법이 있습니다.
    이 방법은 .html 문서안에 작성하는 방법이기 때문에 파일 하나로 html, css 관리가 가능합니다.

  • styles.css 파일에 작성하기
    css 파일을 따로 생성하여 .html 파일에 .css 파일을 link해주는 방법입니다.
    <link rel="stylesheet" type="text/css" href="style.css"> 와 같이 <head> 태그 안에 link를 작성해주면 됩니다.

2. Selector

/*1. 자손 선택자 (Descendant Selector): 공백 문자
자손 선택자를 사용하면 두 번째 요소는 첫 번째 요소의 하위 요소여야만 선택됩니다.*/
div p {
  /* div 요소의 자식인 p 요소를 선택합니다. */
}

/*2. > 자식 선택자 (Child Selector): >  
자식 선택자를 사용하면 두 번째 요소는 첫 번째 요소의 직접적인 자식 요소여야만 선택됩니다.*/
div > p {
  /* div 요소의 직접적인 자식인 p 요소를 선택합니다. */
}

/*3. + 인접 형제 선택자 (Adjacent Sibling Selector): + 
인접 형제 선택자를 사용하면 두 번째 요소는 첫 번째 요소의 바로 뒤에 위치하는 형제 요소여야만 선택됩니다.*/
h2 + p {
  /* h2 요소의 바로 뒤에 있는 p 요소를 선택합니다. */
}

 /*4. ~ 일반 형제 선택자 (General Sibling Selector): ~  
일반 형제 선택자를 사용하면 두 번째 요소는 첫 번째 요소 뒤에 위치하는 모든 형제 요소 중에서 선택됩니다.
h2 ~ p {
  /* h2 요소 뒤에 있는 모든 p 요소를 선택합니다. */
}

/* [] 속성 선택자 (Attribute Selector): []
대괄호 [ ] 안에 속성과 해당 값 또는 값의 일부를 지정하여 해당 속성을 가진 요소를 선택합니다.*/
input[type="text"] {
  /* type 속성 값이 "text"인 input 요소를 선택합니다. */
}

/* : 가상 클래스 선택자 (Pseudo-class Selector): : 
: 뒤에 가상 클래스를 지정하여 특정 상태에 있는 요소를 선택합니다. 
예시로는 :hover, :active, :focus 등이 있습니다.*/
a:hover {
  /* 마우스가 링크 위에 있을 때의 스타일을 지정합니다. */
}

/*:: 가상 요소 선택자 (Pseudo-element Selector): 콜론 두 개 :: 
::뒤에 가상 요소를 지정하여 요소의 특정 부분을 선택합니다. 
예시로는 ::before, ::after, ::first-line, ::first-letter 등이 있습니다.*/
p::before {
  /* p 요소의 내용 앞에 가상 요소를 추가합니다. */
}

예시)

<head>
	<style>
		html {
		background-color: black;
		}
		body {
		background-color: antiquewhite;
		margin: 10px;
		padding: 10px;
		}
        main > span:nth-child(2n) {
		color: red;
		}
		.tomato {
		text-align: center;
		background-color: tomato;
		padding: 10px 50px;
		border-radius: 20px;
		height: 20px;
		width: 100px;
		}
		.btn {
		color: white;
		font-weight: 600;
		}
		#fourth {
		height: 100px;
		width: 100px;
		background-color: green;
		}
        a [href="google.com"]{
        color: blue;
        }
	</style>
</head>
 <body>
    <header>
      <div id="fourth">4</div>
    </header>
    <main>
      <span class="btn tomato">Movie</span>
      <span class="btn tomato">Music</span>
      <span class="btn tomato">TV</span>
      <a href = "google.com">구글링크</a>
    </main>
  </body>
  • Element Selector
    지정된 html 요소에 모두 동일한 스타일을 적용합니다.
  • class Selector
    class는 동일한 스타일을 여러 요소에 적용할 수 있게 해주는 역할을 합니다. 클래스는 동일한 이름을 가진 요소들끼리 묶어주는 역할을 하며, .클래스이름 형식으로 CSS에서 선택할 수 있습니다.
  • id Selector
    id는 하나의 요소에 대해 유일한 이름을 부여하여 CSS와 JavaScript에서 해당 요소를 선택하고 조작할 수 있게 해줍니다. id는 #아이디이름 형식으로 CSS에서 선택할 수 있습니다.
  • Attribute Selector
    요소의 속성 값을  [속성 값] 대괄호로 지정하고 같은 속성값을 갖는 요소의 스타일을 적용합니다.
  • State Selector
    :hover - 요소가 마우스 포인터에 의해 선택될 때의 상태를 나타냅니다.
    :active - 요소가 마우스 버튼을 누르고 있을 때의 상태를 나타냅니다.
    :focus - 요소가 포커스되었을 때의 상태를 나타냅니다.
    :checked - 체크박스나 라디오 버튼 등이 선택되었을 때의 상태를 나타냅니다.
    :disabled - 요소가 비활성화되었을 때의 상태를 나타냅니다.

- Selector 연습하는 사이트: https://flukeout.github.io/

 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

 

 

4. display:

  • block
    속성 값은 요소를 블록 요소로 만들어 줍니다. 블록 요소는 새로운 줄에서 시작하며, 부모 요소의 전체 너비를 차지합니다. 따라서, 블록 요소는 width, height, margin, padding 등의 속성을 모두 지정할 수 있습니다.
  • inline
    속성 값은 요소를 인라인 요소로 만들어 줍니다. 인라인 요소는 문장 내에서 사용되며, 새로운 줄에서 시작하지 않고, 필요한 만큼의 너비만 차지합니다. 따라서, 인라인 요소는 width, height, margin-top, margin-bottom, padding-top, padding-bottom 등의 속성을 지정할 수 없습니다.
  • flex
    - justify-content : 요소를 배치 형태를 지정합니다. flex-start, flex-end, center, space-between, space-around
    - flex-direction : 요소를 배치할 방향을 지정합니다. row, row-reverse, column, column-reverse
    - flex-wrap : 속성은 요소를 한줄 혹은 여러 줄에 배치할 것인지를 지정합니다. nowrap, wrap, wrap-reverse

- flex 연습하는 사이트:https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

5. Media 쿼리

@media screen and (orientation: landscape) {
		#landscapeMode {
		display: none;
		opacity: 0;
	}
}
@media screen and (min-width: 501px) and (max-width: 700px) and {
        div, h1, span, form,
		input {
		transform: scale(0.8);
	}
}
  • 미디어 쿼리(Media Query)는 CSS3에서 추가된 기능으로, 미디어 타입(Media Type)과 뷰포트(Viewport) 크기, 장치(Device) 방향 등과 같은 미디어 특성(Media Feature)을 이용하여 웹 페이지의 스타일을 다양한 환경에 맞게 조정할 수 있는 방법입니다.
  • width, height, orientation, aspect-ratio, color, resolution 등의 값이 있습니다. media feature를 지정하는 부분에서는 미디어 특성을 나열하고, 이들을 괄호로 묶습니다. 이어서 중괄호({}) 안에 스타일을 정의합니다.
  • landscape는 가로모드

 

6. Animation 만들기

  • State Selector를 이용한 애니메이션
#first {
	height: 100px;
	width: 100px;
	background-color: red;
	border-radius: 0px;
	font-size: 12px;
	transition: all 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
	transform: translateY(0px) scale(1) rotateX(0) rotateY(0);
	}
#first:hover {
	transform: translateY(20px) scale(0.5) rotate(360deg) rotateX(360deg);
	font-size: 30px;
	border-radius: 35px;
	background-color: chartreuse;
}
  • 위와같이 first라는 id를 갖는 요소에 hover라는 state가 발생했을때 회전하는 애니메이션을 만들어볼 수 있습니다.
  • first 디폴트 상태에서 hover 상태로 변했을 때 first:hover에 작성되어있는 스타일로 변화하게됩니다.
  • 따라서, hover상태에 변화시킬 속성들은 first 기본 스타일에 초기값이 명시되어있어야합니다.

 

  • keyframes를 사용한 애니메이션
#third {
	height: 100px;
	width: 100px;
	background-color: yellow;
	animation: thirdFlip 5s ease-in-out;
}
 @keyframes thirdFlip {
		0% {
		transform: rotateY(0);
		border-radius: 0px;
		}
		50% {
		transform: rotateY(180deg) translate(100px);
		border-radius: 180px;
		}
		100% {
		transform: rotateY(0deg) translate(0px);
		border-radius: 0px;
		opacity: 0;
	}
}
 @keyframes thirdFlip2 {
		from{
		transform: rotateY(0);
		
		}
		to{
		transform: rotateY(180deg)
	}
}
  • keyframes로 진행률을 %로 설정하여 5s초동안 진행되는 anmaion을 구분동작으로 지정할 수 있으며, from과 to로 전 후로만 지정할 수 있습니다.
  • keyframes 를 thirdFlop으로 생성해주고 애니메이션을 적용시킬 third의 anmaion: 속성값에 thirdFlip 을 지정하고 실행될 시간, 방식을 입력합니다.
  • ease-in function :
    linear - 시작부터 끝이 일정한 속도로 진행됩니다.
    ease-in - 시작과 끝이 빠름게 진행됩니다.
    ease-out - 시작과 끝이 느림게 진행됩니다.
    ease-in-out - 시작이 빠르고 끝이 느림게 진행됩니다.

- Animation 만들어주는 사이트: https://matthewlein.com/tools/ceaser

 

Ceaser - CSS Easing Animation Tool - Matthew Lein

Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them

matthewlein.com

 

이번 HTML, CSS 포스팅에서 가장 중요한 점은 이모든걸 외울 필요가 없으며, 필요할 때 MDN에 찾아서 사용하자라는 점입니다.

 

반응형

'웹 개발 > Javascript' 카테고리의 다른 글

5. [Javascript] Events 발생시키기 (with function)  (1) 2023.05.17
4. [Javascript] Document 객체를 이용하여 HTML 값 활용하기  (0) 2023.05.16
3. [Javascript] Function (함수)  (0) 2023.05.16
2. [Javascript] 변수선언  (0) 2023.05.15
1. [Javascript] Live Server 실시간 디버깅(with VSCode)  (0) 2023.05.08
'웹 개발/Javascript' Related Articles more
Comments