[이브와 블렌디드러닝] 웹개발 기초 01

ssook·2021년 6월 1일
CSShtmljs블렌디드러닝이브와진짜기초
0

웹개발 기초

목록 보기
1/10
post-thumbnail

✋ 한이음 블렌디드 러닝으로 제공하는 스파르타 코딩 클럽 웹개발 기초를 듣고 정리한 글입니다.

▶ 강의 링크

📍 브라우저가 하는 일

웹 페이지는 모두 서버에서 미리 준비해두었던 것을 받아서 그려주는 것

- HTML을 받는 경우

서버가 만들어 놓은 API에 프로토콜 대로 요청을 보내고, 받은 HTML 파일을 그려줌.

- 데이터만 받는 경우

전체 웹 페이지를 바꾸는 것이 아닌, 그 안에 있는 데이터만 바꿔 끼는 경우
이때 JSON 형식을 받아서 수정

📍 HTML, CSS, JS를 간단하게 말해보자면?

html은 뼈대, css는 꾸미기, JS는 움직이는 상호작용!

  • html은 구역과 텍스트를 나타내는 코드
  • css는 잡은 구역을 꾸며주는 것
  • JS는 사용자와의 상호작용을 보여주는 하나의 로직

📍 HTML 기초

<html>
	<head>
    		<title>예시입니당</title>
            	<meta charset = "utf-8">
    	</head>
    
    <body>
    </body>
</html>
  • html은 크게 head와 body로 구성.
  • head 태그 안에 대표적으로 들어가는 요소들은 meta, script, link, title이 있습니다.
    즉, head에서는 페이지의 속성을 정의하거나, 필요한 스크립트를 부릅니다.
    눈에 보이지 않는 필요한 것들, body작업을 하면서 필요한 정보들을 담을 때 쓰입니다.
    예) favicon 넣기

📍 HTML 자주 쓰이는 기본 태그 예시

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>예시입니다.</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="https://velog.io/@ssook1222"> 벨로그로 이동 </a>
    <hr>
    img 태그입니다: <img src="data:image/jpeg;base64,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" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button>버튼입니다.</button>
    <hr>
    textarea 태그입니다: <textarea>크기 조절이 가능한 입력창입니다.</textarea>
</body>
</html>
  • 위 코드에 있는 꺽새들을 태그라고 부른다.
  • 열린 태그와 닫는 태그로 생긴 구조이지만, meta 태그처럼 닫는 태그가 없는 경우도 많다.
  • 웹 페이지에서 우리 눈에 보이는 것이 body 태그이다. 아래는 추가적인 내용.
- div는 division의 약자로, 묶어서 한 번에 옮길 때 쓴다.
- p는 문단 paragraph의 약자로, 자동으로 줄 바꿈 된다.
- ul, li은 리스트로, 사용시 bullet point가 생긴다.
- h1은 제목이다. 웹 페이지마다 한 개씩 있는 것이 좋다.
- span은 줄을 바꿔버리는 div와 다르게 한 줄에서 꾸며 쓸 수 있게 해준다.
- hr 태그는 가로선을 만들어 준다.
- 파이참을 쓰다가 들여쓰기가 이상하면 ctrl + alt + l(윈도우 기준)

📍 부모 자식 태그

<div>
  <button>ha<button>
    </div>
  • html은 부모-자식 구조가 중요하다. 자신을 감싸고 있는 부모 태그가 바뀌면, 그 안의 내용물도 모두 바뀌기 때문.
  • 예를 보면 button은 div의 자식태그, div는 button의 부모태그이다.
    이때 부모 태그인 div의 css 속성을 바꾸면 자식 태그인 button도 자동으로 변경된다.

📍 CSS의 식별자(class, id)

  • css를 사용하여 html 태그를 꾸며주기 위해서는 태그를 식별할 수 있어야 한다.
    → 따라서 식별을 하기 위해 태그에 명찰을 달아주는 것과 이 명찰을 지칭하도록 해주는 것이 핵심이다.
  • 이 식별자에는 class와 id가 있다.
  • id 식별자는 고유의 태그를 지정하고 식별하는 데에, class 태그는 하나의 기능을 제공하는 태그 여러 개를 지정하고 식별하는 데 사용하는 데 좋다.
  • class 식별자는 . 이며, id 식별자는 # 이다.
.class1{
/**꾸밀 내용**/
}

#id1{
/**꾸밀 내용**/
}

📍 CSS, Html에 연동하기

  • (Linking Style) html head태그에 를 적으면 된다. 같은 파일 내에 있다면, 파일 이름만 적어도 되나 그렇지 않으면 상대 경로나 절대 경로 중 택해서 작성하면 된다.
<head>
<link rel="stylesheet" href="style.css">
  </head>
  • (Internal Style) html head태그에 style 태그를 넣어주면 된다.
<head>
<style>
  
  </style>
</head>
  • (Inline Style) style태그에 그냥 css 코드를 넣어 적용시키는 방법, 재사용이 불가능한 것 외에도 어느 정도 한계가 있다. 그냥 그 때마다 즉각적으로 어떻게 바뀌는지 확인하기 위해
    쓰인다.
<h2 style="font-size:0.5em">연습용 부제목이랍니다.</h2>

→ Linking Style에 볼드처리를 한 이유는 필자가 css코드 작성할 때 가장 많이 쓰지만, 계속 까먹어서...😇 나중에 코드 찾을 때 보기 편하게 해놓기 위함이다.

profile
ssook
개발자에서, IT Business 담당자로. BrSE 업무를 수행하고 있습니다.
다음 포스트

[이브와 블렌디드러닝] 웹개발 기초 02

0개의 댓글