웹 입문

chris0205.eth·2021년 12월 25일
1

목록 보기
1/4
post-thumbnail

(공격적인)피드백은 언제든지 환영입니다

시작

나는 승산이 없는 싸움은 하지 않는다.
그래서 코딩 공부를 지금껏 미루고 미뤄왔다. 아니 미뤘다기 보단 계속 간을 봤다. 내가 이쪽에 발을 들여서 성공할 수 있는가, 진짜 자신있는가,, 등등
그러다 '멋쟁이 사자처럼' 대표 이두희님이 출연하신 유튜브

이두희가 NFT 시장에 진출한 이유는?

를 보고 더 이상 미룰수 없겠다는 생각이 들었다.
미루면 늦어질 뿐이고 늦어지면 아쉬울 사람은 나였다.
후회없는 선택을 하는것이 내 인생의 좌우명이기에 지금 나는 드디어 코딩을 공부하기로 선택했고 이 결정에 더 이상 후회나 번복은 없다.

한번 시작한 이상 충분히 승산있는 싸움으로 만들것이다


HTML

: Hypertext Markup Language

하이퍼텍스트를 작성하기 위해 개발된 기본적인 웹 언어의 한 종류이다.
명령어로는 태그(TAG)를 사용한다. 별도의 컴파일러가 필요없는 사용하기 쉬운 언어이다.

구조

문서의 구조는 크게 headbody, 두 부분으로 나뉜다.
head는 title, meta 태그가 구성하고, body는 본문의 내용을 구성한다.
이때, 룰이 존재하는데 다음과 같다.

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>canu-p</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <ol>
    <li>school</li>
    <li>career</li>
    <li>goal</li>
  </ol>
	<h1>Hello world</h1>
  <p>Chanwoo Park<br>civil & environmental engineering</p>
  <p style = "margin-top:45px;">My last goal = Fullstack CEO</p>
  <img src="coin.jpg" width="100%">
	<script src="script.js">  
	</script>
 </body>
</html>

문서의 시작은 !doctype html 이다. 그리고 html 태그로 전체 코드를 묶어준다.
html 태그는 앞서 설명한 head와 body로 구성되어 있다.

속성(Attribute)

태그(TAG)만으로 부족한 의미를 속성을 이용하여 부여할 수 있다.

<img src="coin.jpg" width="100%">
  • src는 source이다.

링크(anchor)

웹의 핵심 기능이라고 할 수 있는 태그이자 없어서는 안 될 본질적인 기능이다.
무궁무진한 웹서핑을 가능케 한다.
다음과 같이 쓰인다.

<!doctype html>
<html> 
 <body> 
  <h2>Hello world</h2>
  <p><a href="https://www.instagram.com/icecanu_" target="_blank" title="canu on instagram">Chanwoo Park</a><br>civil & environmental engineering</p>
  <img src="coin.jpg" width="100%">
 </body>
</html>

위의 코드에서 a가 anchor 태그이다. href은 하이퍼링크의 주소 속성이고, 그 다음 속성은 새탭으로 창을 띄운다는 의미이다. 마지막 속성은 링크의 이름을 나타내준다.


CSS

: cascading style sheets

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.

Selector

css 규칙을 적용할 요소를 결정하는 역할을 한다.

규칙으로는

  1. 선택자의 종류가 같은 경우, 마지막에 지정된 스타일을 우선적으로 적용한다.
  2. 종류가 다른 경우 우선순위는 id selector > class selector > element(tag) selector 이다.

id selector는 #, class selector는 .을, element selector는 tag만을 사용하여 표현한다.

Box model


HTML 태그 (element)에는 두가지 종류가 있다. 하나는 box level element, 나머지 하나는 inline element이다.

<h1><a href="index.html">Portpolio</a></h1>

h1 태그는 대표적인 box level element이다.

위 사진에서 볼 수 있듯이 웹페이지의 한 라인 전체를 차지한다. 또 다른 box level element로는 div 태그가 있다. 이 태그는 의미를 가지지 않으며 단지 여러개의 태그들을 묶어주는 역할을 한다.
inline element 중에서도 div와 같은 역할을 하는 태그가 있는데 그것은 바로 span 태그이다. 이 둘을 잘 활용하면 css 사용이 훨씬 유용해진다.

Grid

css 없이 html만으로 짠 웹페이지는 contents들이 1열로 나열되어 있다. 하지만 display 라는 declaration 을 이용한다면 웹페이지의 contents들을 여러 열로 나누어 줄 수 있다. 앞의 사진에서 볼 수 있듯이 말이다.

#grid {
  display:grid;
  grid-template-columns:150px 1fr;
}

display를 grid로 설정해준 다음 어떻게 나눌 것인지 template을 설정하면 된다.

display

display 속성은 꽤나 중요하다. display를 어떻게 설정하느냐에 따라 contents의 level이 결정되기 때문이다. 앞서 언급한 block level element를

display:inline;

라는 코드를 사용함으로써 inline element로 바꿀수 있기 때문이다.

Media query

반응형 웹을 위해 필수적인 요소이다.

@media(max-width:600px){
  #grid {
    display:block;
  }
  #grid ol {
    border-right:none;
  }
  h1 {
    border-bottom:none;
  }
}

위와 같은 방식으로 사용된다.


JavaScript

크로스 플랫폼(cross flatform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다.

보통 '.js' 파일로 존재한다.

<script src="colors.js"></script>

위와 같은 html 태그로 파일을 불러온다.

Object 객체

클래스에서 정의한 것을 토대로 메모리(실제 저장공간)에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료 구조, 함수 또는 메소드가 될 수 있다. 쉽게 말해서 서로 연관된 함수 & 변수들을 그룹핑하여 정리정돈을 하기 위한 수납상자라고 생각할 수 있다.
즉, 순서대로 정보를 담는 배열과는 다르게 순서없이 정보가 담겨 있다.

Method

객체에 속해 있는 함수이다.

var Body = {
  setBackgroundColor:function(color){
    document.querySelector('body').style.backgroundColor=color;
  },
  setColor:function(color){
    document.querySelector('body').style.color=color;
  }
}

위의 Body라는 객체에는 setBackgroundColor라는 property와 그에 대응하는 함수인 method가 정의되어 있다.

Array 배열

순서대로 정보를 담는다.

var coworkers = ["canu", "ice", "cold"];

위 배열에서 각각의 값은 0,1,2의 index값을 가진다.

Get object properties

Array와는 다르게 Object는 index값이 정해져있지 않으므로 property값을 불러오기기가 막막할 것이다. 이는 다음과 같은 방법으로 해결가능하다.

for(var key in Body){
	document.write(key+':'+Body[key]);
}

위의 코드에서 key value는 Body라는 객체의 property이다.

Refactoring

코드를 효율적으로 개선한다는 개념이다.

profile
long life, long goal

1개의 댓글

comment-user-thumbnail
2022년 7월 25일

비슷한 목표를 지닌 동기분을 만나니 너무너무 기쁘네요 ㅎㅎㅎㅎ
블로그 찾아와주셔서 정말 감사합니다!
전역하고 정말 밥 한 번 같이 먹어요~~~
포스팅 화이팅입니다!!!

답글 달기