[TIL] Web 기초 및 html/css

박동우·2023년 3월 13일

블록체인스쿨3기

블록체인 스쿨 3기

목록 보기

1/72

[TIL] 2023-03-13

Web 기초

1. web

web 1.0
web 2.0

2.HTTP와 URL

http
URL
개념

3. 쿠키와 세션

쿠키란?
쿠키의 역할
세션이란?

4. IP, Port, DNS

네트워크 : 두 대 이상의 컴퓨터가 연결된 통신망
핵심 -> 데이터가 어떻게 오가는지 파악하는 것
라우터 : 서로 다른 네트워크 간의 연결을 도와줌
IP : 컴퓨터 간 데이터를 주고받는 네트워크 계층의 규약
- 핵심 -> 데이터 전달에 필요한 목적지 컴퓨터 정보가 필요
  IP주소
  IPv4 -> IPv6 : IP주소 갯수가 부족해짐에 따라 나타난 개념
  (0~255.255.255.255)
공인 IP : 전체 인터넷 망에서 고유하게 식별 가능한 주소
ISP : 인터넷 서비스 제공자 -> 우리에게 공인 IP부여
핵심 -> 본래 개념은 위와 같지만 IPv4 갯수가 부족하기 때문에 사설 IP를 부여함(하나의 공인IP에서 많은 사설 IP 부여 가능)
사설 IP : 가정의 LAN과 같은 네트워크에서 할당되는주소
localhost : 127.0.0.1 (자기 자신)
port : 서비스를 구분 하는 역할(like 동, 호수)

DNS : URL을 해석하여 IP 주소로 반환하는 서버
국가, 기업 등이 운영

HTML

HyperText Markup Language
(링크 의미부여 언어)

html
구조/내용
css
모양/스타일
js
이벤트/반응

크롬 개발자 도구
HTML/CSS/JS 요소내용 확인
에러 로그
네트워크 통신정보
단축키 : ctrl+shift+i

html/css 학습

html

기본구조

html 안에 head, body가 존재

기본 양식

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

헤드 부분

순서 상관x

한글 사용법

<meta charset="UTF-8">

타이틀

<title></title>

링크(css와 html 연결)

<link rel="stylesheet" href="codelion.css">

바디 부분

제목

<h1></h1>

문단

<p></p>
<p class=""></p>

구역(묶기)

<div></div>
<section></section>
<article></article>

footer(밑바닥)

<footer></footer>

css

형태

footer {
    text-align: center;
    background-color: black;
    color: white;
}

html class 지정(.)

.class{}

가운데 정렬

	text-align: center;
    margin-left: auto;
    margin-right: auto;

박스 기본 개념

margin : 테두리 바깥
border : 테두리
padding : 글자와 테두리 사이

폰트
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');
문서 전체 선언(*)

* {
    font-family: 'Montserrat';
}

float(한줄에 나타내기)
핵심 -> 다음 줄 코드를 위해서 div로 묶고 overflow:hidden; 해줘야함
이미지

<img src="폴더/사진이름.png">

링크 연결(a태그)

<a href="http://facebook.com"><img class="sns-img" src="images/facebook.png"></a>

실제코드

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>김멋사의 이력서</title>
  <link rel="stylesheet" href="codelion.css">
</head>
<body>
  <div class="mainbox">
    <div class="title-box">
      <h1>김멋사</h1>
      <p class="name-text">HTML/CSS 개발자</p>
    </div>
    <section>
      <h2>ABOUT ME</h2>
      <p class="about-me-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </section>
    <section>
        <h2>EXPERIENCE</h2>
        <div class="float-wrap">
          <p class="title-text">Awesome Programming Company</p>
          <p class="year-text">2020 - Now</p>
        </div>
        <p class="desc-text">Front-End Web Developer</p>
        <p class="desc-subtext">HTML/CSS, JS, React, ...</p>
        <div class="float-wrap">
          <p class="title-text">Ministry of Health</p>
          <p class="year-text">2015 - 2018</p>
        </div>
        <p class="desc-text">UI/UX Designer</p>
        <p class="desc-subtext">Web design</p>
        <div class="float-wrap">
            <p class="title-text">Freelance Work</p>
            <p class="year-text">2011 - 2015</p>
        </div>
        <p class="desc-text">Graphic Designer</p>
        <p class="desc-subtext">Graphic Design, Editorial Design</p>
      </section>

      <section>
        <h2>ACTIVITIES</h2>
        <div class="float-wrap">
          <p class="title-text">Front-End Web Developer Forum Volunteer</p>
          <p class="year-text">2019 - 2020</p>
        </div>
        <p class="desc-text">Application Page Development</p>
        <p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
        <div class="float-wrap">
          <p class="title-text">LIKELION SEOUL</p>
          <p class="year-text">2017 - 2018</p>
        </div>
        <p class="desc-text">Teacher in Mutsa University</p>
        <p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
        <div class="float-wrap">
          <p class="title-text">Open Source Committer</p>
          <p class="year-text">2011 - 2013</p>
        </div>
        <p class="desc-text">Angular JS</p>
        <p class="desc-subtext">Lorem ipsum dolor sit amet.</p>
    </section>

    <section>
        <h2>EDUCATION</h2>
        <div class="float-wrap">
            <p class="title-text">Mutsa University</p>
            <p class="year-text">2008 - 2012</p>
        </div>
        <p class="desc-text">Computer Science and Engineering</p>
        <div class="float-wrap">
            <p class="title-text">Mutsa High school</p>
            <p class="year-text">2006 - 2008</p>
        </div>
        <p class="desc-text">Visual Communication Design</p>
        <div class="float-wrap">
            <p class="title-text">Online Programming Academy</p>
            <p class="year-text">2006 - 2007</p>
        </div>
        <p class="desc-text">Python Course</p>
    </section>

    <section>
      <h2>AWARDS</h2>
      <div class="float-wrap">
        <p class="title-text">LIKELION SEOUL</p>
        <p class="year-text">2018</p>
      </div>
      <p class="desc-text">Best Developer Award</p>
    </section>

    <div class="sns-wrap">
      <a href="http://facebook.com"><img class="sns-img" src="images/facebook.png"></a>
      <img class="sns-img" src="images/twitter.png">
      <img class="sns-img" src="images/linked-in.png">
      <img class="sns-img" src="images/insta.png">
    </div>
  </div>
  <footer>
      <p>Copyright CODE LION All rights reserved. </p>
  </footer>
</body>
</html>

codelion.css

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');

* {
    font-family: 'Montserrat';
}

body,h1,h2 {
    margin:0px;
    padding:0px;
}


body {
    min-width: fit-content;
}

h1 {
    font-size:36px;
    font-weight: bold;
    font-style: italic;
}


h2 {
    font-size:20px;
    color:#282828;
    font-weight: lighter;
    margin-bottom: 16px;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 5px;
}

.name-text {
    font-size:16px;
    color:#7c7c7c;
    font-weight: bold;
}

.about-me-text {
    font-size:10px;
    line-height: 16px;
}

.mainbox {
    width: 610px;
    padding: 30px;
    margin: 30px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #ebebeb;
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
}

.title-box {
    text-align: right;
}

section {
    margin-bottom:24px;
}

.float-wrap {
    overflow: hidden;
}

.title-text {
    font-size:11px;
    font-weight: bold;
    color: #282828;
    float: left;
}

.year-text{
    font-size:11px;
    font-weight: bold;
    color: #282828;
    float: right;
}

.desc-text {
    font-size: 9px;
}

.desc-subtext {
    font-size: 9px;
    color:#282828;
    padding-left:16px;
}

.sns-img {
    width:12px;
    height:12px;
}

.sns-wrap {
    text-align:right;
}

footer {
    text-align: center;
    background-color: #1e1e1e;
    padding: 20px;
    font-size: 12px;
    color: #919191;
}

박동우

HELLO!

다음 포스트

[TIL] Web 기초 및 html/css

블록체인 스쿨 3기

Web 기초

1. web

2.HTTP와 URL

3. 쿠키와 세션

4. IP, Port, DNS

HTML

html/css 학습

html

기본구조

헤드 부분

바디 부분

css

실제코드

index.html

codelion.css

[TIL] Day1 html/css

0개의 댓글