웹개발공부 (w.스파르타코딩클럽 / 1주차)

Kassid·2021년 11월 28일

CSS frontend html web

web

목록 보기

1/5

스파르타 코딩클럽 서포터즈 '르탄즈' 활동 중 우수 활동자로 발탁이 되어서

'웹개발 종합반'이라는 정규강의를 수강할 수 있는 좋은 기회를 얻게 되었다!

5주간 웹의 동작 원리부터 Html Css JS 그리고 직접 나만의 웹서비스를 만들 수 있는

커리큘럼이 짜여져 있다.

그 시작으로 1주차 수업을 듣고 나서 배운 내용을 간단히 정리 해보려고 한다!

1. 서버/클라인트/웹 동작 개념

1-1 웹 동작 개념(HTML을 받을 때)

서버는 데이터를 저장하고 요청받은 것을 제공하는 역할을 한다.
그리고 브라우저는 서버에서 데이터를 받아와서 사용자의 화면에 그려주는 역할을 한다.

이때 http(HyperText Transfer Protocol)라는 약속에 따라서 브라우저가 요청을 하는데 API(Application Programming Interface)라는 서버가 만들어 놓은 창구에 보낸다.

1-2 웹 동작 개념(데이터만 받을 때)

서버에서 뼈대(html)를 계속 불러오는 방식도 있지만 데이터만 받아오는 방법이 있는데
JSON(JS Object Lotation)방식이 바로 그것이다.
브라우저가 미리 뼈대를 다운받아 가지고 있고, 서버에서 데이터 만을 제공받는 것이다. 즉, 껍데기만 가지고 있다가 데이터를 받아서 붙여주는 것이다.
이 방식은 '앱'에서 많이 사용되는 것이라고 한다.

2. HTML/CSS

2-1 개념 및 구조

HTML은 구역과 텍스트를 나타내는 코드 / 뼈대
CSS는 잡은 구역을 꾸며주는 역할 / 꾸미기
(CSS를 잘 사용하는 것과 이쁘게 만드는 것은 다른 영역이다)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title> </title>
    <style> </style>
    <script> JS내용 </script>
</head>
<body>

</body>
</html>

HTML

구성

HTML은 크게 head와 body로 구성이 된다.
이 때 head는 페이지의 속성 정보를 담는다. <style>,<script> 등
CSS와 JS 등 적용할 수 있다.

body는 본격적으로 뼈대를 만들어내는 본문이라고 생각하면 된다.

HTML은 태그라는 요소로 문서를 구성한다. 즉, HTML을 구성하는 기본단위이다.
그래서 텍스트, 구역 등을 태그로 표현한다.

구역을 나누는 태그들

div: 구역 나누기
p: 문단
ul&ol: 순서 없는&있는 목록
li: 목록/ul과 ol 내부에 들어간다

구역 내 콘텐츠 태그들

h1~5: 섹션, 문단의 제목 / h1은 꼭 써주는 편이 좋다.
a: anchor / 하이퍼링크를 걸어주는 태그
img: image / 이미지
그 외input,button,textarea 등

html의 태그는 정말정말 많고 아무도 모두 외우지 않는다.
자주 사용하는 것은 자연스럽게 쓸 수 있을 것이고,
필요한 기능이 있다면 찾아서 활용을 하면 된다!

구역 안의 구역

html 태그는 '내 안에 너 있다'구조가 있다. 즉, 부모-자식 구조가 있는데

위의 그림에서 A안에 B,C 태그가 있을 때 A에 속성을 부여하면 B,C에 모두 적용이 된다.
이 때 B나 C에 따로 속성을 적용을 한다면 "우선 적용"이 된다.

CSS

<head>의<style>안에 작성을 하면 되고 태그, class, id 에 적용을 할 수 있다.
이때 적용 우선순위는 id>class>태그이다. (같은 레벨끼리는 나중에 선언 된 것이 '선')
이에 따라서 태그선택자로 전체적으로 디자인한 후, class,id로 구체적인 것을 추가한 방식을 주로 이용한다!

그 외)

배경 관련
-> background-color, background-image, background-size, background-position
사이즈
-> width, height
간격
-> margin, padding : 바깥여백, 안 여백

위 사진을 잘 알고 있는 것이 좋다!