(공격적인)피드백은 언제든지 환영입니다
나는 승산이 없는 싸움은 하지 않는다.
그래서 코딩 공부를 지금껏 미루고 미뤄왔다. 아니 미뤘다기 보단 계속 간을 봤다. 내가 이쪽에 발을 들여서 성공할 수 있는가, 진짜 자신있는가,, 등등
그러다 '멋쟁이 사자처럼' 대표 이두희님이 출연하신 유튜브
를 보고 더 이상 미룰수 없겠다는 생각이 들었다.
미루면 늦어질 뿐이고 늦어지면 아쉬울 사람은 나였다.
후회없는 선택을 하는것이 내 인생의 좌우명이기에 지금 나는 드디어 코딩을 공부하기로 선택했고 이 결정에 더 이상 후회나 번복은 없다.
하이퍼텍스트를 작성하기 위해 개발된 기본적인 웹 언어의 한 종류이다.
명령어로는 태그(TAG)를 사용한다. 별도의 컴파일러가 필요없는 사용하기 쉬운 언어이다.
문서의 구조는 크게 head와 body, 두 부분으로 나뉜다.
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로 구성되어 있다.
태그(TAG)만으로 부족한 의미를 속성을 이용하여 부여할 수 있다.
<img src="coin.jpg" width="100%">
웹의 핵심 기능이라고 할 수 있는 태그이자 없어서는 안 될 본질적인 기능이다.
무궁무진한 웹서핑을 가능케 한다.
다음과 같이 쓰인다.
<!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 규칙을 적용할 요소를 결정하는 역할을 한다.
규칙으로는
- 선택자의 종류가 같은 경우, 마지막에 지정된 스타일을 우선적으로 적용한다.
- 종류가 다른 경우 우선순위는 id selector > class selector > element(tag) selector 이다.
id selector는 #, class selector는 .을, element selector는 tag만을 사용하여 표현한다.
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 사용이 훨씬 유용해진다.
css 없이 html만으로 짠 웹페이지는 contents들이 1열로 나열되어 있다. 하지만 display 라는 declaration 을 이용한다면 웹페이지의 contents들을 여러 열로 나누어 줄 수 있다. 앞의 사진에서 볼 수 있듯이 말이다.
#grid {
display:grid;
grid-template-columns:150px 1fr;
}
display를 grid로 설정해준 다음 어떻게 나눌 것인지 template을 설정하면 된다.
display 속성은 꽤나 중요하다. display를 어떻게 설정하느냐에 따라 contents의 level이 결정되기 때문이다. 앞서 언급한 block level element를
display:inline;
라는 코드를 사용함으로써 inline element로 바꿀수 있기 때문이다.
반응형 웹을 위해 필수적인 요소이다.
@media(max-width:600px){
#grid {
display:block;
}
#grid ol {
border-right:none;
}
h1 {
border-bottom:none;
}
}
위와 같은 방식으로 사용된다.
크로스 플랫폼(cross flatform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다.
보통 '.js' 파일로 존재한다.
<script src="colors.js"></script>
위와 같은 html 태그로 파일을 불러온다.
클래스에서 정의한 것을 토대로 메모리(실제 저장공간)에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료 구조, 함수 또는 메소드가 될 수 있다. 쉽게 말해서 서로 연관된 함수 & 변수들을 그룹핑하여 정리정돈을 하기 위한 수납상자라고 생각할 수 있다.
즉, 순서대로 정보를 담는 배열과는 다르게 순서없이 정보가 담겨 있다.
객체에 속해 있는 함수이다.
var Body = {
setBackgroundColor:function(color){
document.querySelector('body').style.backgroundColor=color;
},
setColor:function(color){
document.querySelector('body').style.color=color;
}
}
위의 Body라는 객체에는 setBackgroundColor라는 property와 그에 대응하는 함수인 method가 정의되어 있다.
순서대로 정보를 담는다.
var coworkers = ["canu", "ice", "cold"];
위 배열에서 각각의 값은 0,1,2의 index값을 가진다.
Array와는 다르게 Object는 index값이 정해져있지 않으므로 property값을 불러오기기가 막막할 것이다. 이는 다음과 같은 방법으로 해결가능하다.
for(var key in Body){
document.write(key+':'+Body[key]);
}
위의 코드에서 key value는 Body라는 객체의 property이다.
코드를 효율적으로 개선한다는 개념이다.
비슷한 목표를 지닌 동기분을 만나니 너무너무 기쁘네요 ㅎㅎㅎㅎ
블로그 찾아와주셔서 정말 감사합니다!
전역하고 정말 밥 한 번 같이 먹어요~~~
포스팅 화이팅입니다!!!