1주차 화요일.
오늘은 아침에 일어나기 유난히 힘들었다.
일어나자마자 에스프레소 샷2잔을 내리 먹었다.

이제 공부시간이니 잠을 깨고 집중해보려한다.
어제는 컴퓨터가 무엇인지? 웹 클라이언트와 웹서버
Java 개발환경 설정까지 완료해서 Hello World를 띄어보았다.
오늘은 HTML과 CSS 챕터이다.
백엔드 과정인데 프론트엔드 교육이 있는 이유는
너무나도 당연하게 현업에서 프론트엔드와 소통해야할 경우 많고
작업간의 겹쳐있는 부분이 있기에 알아두면 무조건 좋다.
기존의 내 직종에서도 소통이 얼마나 중요한지 나는 느껴보았기 때문에
확실하게 공부해서 현업소통시 문제없도록 준비해갈 생각이다.


집을 짓는다고 가정할때

HTML : 집의 구조, 뼈대를 만들고 (구조)
CSS : 집을 꾸미고, 이쁘게 만들고 (스타일)
JS : 집 내부의 밤이되면 켜지는 전구를 설치 (상호작용)
이라고 생각하면 간단할 것 같다.


HTML (HyperText Markup Language)

HTML은 tag의 집합이라 생각하면 된다.
Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소
ex) <head>,<body> etc..


Tree Structure

<head>
</head>

<body>
    <div>

        <p><p>
    <div>
</body>


Tag

<div> : 한줄을 차지합니다.  
<span> : 컨텐츠 크기만큼 공간을 차지합니다.  
div vs span : 한줄을 차지하냐 아니냐의 차이.

<section> : 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분  
<h1>~<h6> : 제목  
<strong> : 문장의 일부분을 강조 ex) **주의 !!**  
<em> : 구어체의 강조 ex) _얼른 !!_  
<mark> : 텍스트의 형광펜처럼 하이파리트 표시  ex) 고양이  
<sub> : 아랫첨자 텍스트 표시, 수학,과학등 ex) 2H₂   
<del> : 텍스트의 가운데라인 추가 ex) ~나는~
<q> : 문단안의 짧은 인용구, 따음표추가됨 ex) "나무위키는 좋습니다"
<blockquote> : 다른 출처로부터 인용된 블록을 정의
<bdo dir="rtl"> : 텍스트의 방향성을 정의 ex) "요세하녕안"
<abbr> : "W3C","HTML"등과 같이 단어의 축약형(abbreviation)이나
머리글자로된 단어를 정의할떄 사용

<pre> : 요소 내의 텍스트를 그대로 표시
<hr> : 가로줄 넣기 / style = "border: 선종류,굵기,색상"
<br> : 줄바꿈 넣기
<img> : 이미지 삽입. / img = "" : 주소
<a> : 링크 삽입. / href = "" : 주소  / target = "" : 탭지정
<ul>,<ol>,<li> : 리스트
<input> : 입력 폼 / type ="radio" name="" : 여러버튼중 선택 / type = "checkbox" : 체크박스
<textarea> : 입력 폼, 줄바뀜이됨
<button> : 버튼

*HTML 연습!!* -> HTML Exercises사이트


CSS (Cascading Style Sheets)

웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어.
UI (사용자 인터페이스 / User Interface)
컴퓨터와 교류하기 위한 연결고리.
예를 들어, 트위터를 트윗할때 글작성 후 버튼만 누르지 누구도 CLI(터미널)을 사용하지 않는다.
사용자가 쉽게 컴퓨터에게 의도한 행동을 명령할 수 있게 만든 인터페이스 앞에 “사용자”를 붙여
사용자 인터페이스라고 한다.

UX (좋은 사용자 경험 / User Experience)
UX는 직관적이고 쉬운 UI에서 나온다.
UX를 신중하게 고려하여 구성된 UI는 사용자 입장에서 좀 더 편리하고
직관적으로 어플리케이션을 사용할 수 있도록 도울 수 있다.

image

<link rel="stylesheet" href="index.css" />

HTML과 CSS파일 연결 방법 index.css라고 지정된파일을 연결함으로서 CSS가 적용됨
CSS 적용 방법 중 위와 같이 외부의 index.css라는 파일을 불러와서 사용하는 방식을
외부 스타일 시트라고 합니다. 이외에 같은 줄에서 스타일 적용하는 인라인 스타일,
별도의 파일을 구분하지 않고 style 태그 내에 작성하는 내부 스타일 시트가 있습니다.

✔︎관심사 분리 측면에 있어 인라인 스타일, 내부 스타일 시트는 권장하지 않는 방법


셀렉터 (selector)

기본적인 태그로 셀렉팅할 수 있고, id, Class붙여서 스타일링을 적용할 수도 있다.

태그로 셀렉터 지정

h4 {
  color: red;
}

<index.css> <index.html의 h4태그를 전부 red로 바꿈>


id로 셀렉터 지정

#navigation-title {
  color: red;
}

<index.css 파일> <index.html의 navigation-title이라는 id의 태크만 red로 바꿈>


<h4 id="navigation-title">This is the navigation section.</h4>

<index.html 파일>


Class로 셀렉터 지정

.menu-item {
  text-decoration: underline;
}

<index.css파일> <index.html의 menu-item이라는 class의 태그만 밑줄침>


<ul>
	<li class="menu-item">Home</li>
        <li class="menu-item">Mac</li>
	<li class="menu-item">iPhone</li>
	<li class="menu-item">iPad</li>
</ul>

<index.html 파일>


image

이 외에도 엄청 다양한 셀렉터 들이있다.
attribute, 후손, 자식, 인접 형제 등 이러한 것들이 있다고 알아두기만 하자.


색상

글자의 색상을 변경하는 속성

.red {
  color: #ff0000;
}

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}


글꼴

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}


*구글폰트 -> https://fonts.google.com/


크기

.title {
  font-size: 24px;
}
  • 절대 단위: px, pt 등
  • 상대 단위: %, em, rem, ch, vw, vh 등

기기나 브라우저 사이즈 등 환경에 영향받지 않는 절대적 크기 = px(픽셀)을 자주사용
일반적인 상대적인 경우 = rem


기타 스타일링

  • 굵기: font-weight
  • 밑줄, 가로줄: text-decoration
  • 자간: letter-spacing
  • 행간: line-height


정렬

가로정렬 text-align / left, right, center, justifty(양쪽 정렬)
세로정렬 vertical-align / 부모 요소의 display 속성이 반드시 table-cell이어야한다.


박스 모델

모든 콘텐츠는 고유한 영역이 있다.
박스는 항상 직사각형이고, 너비(witdth)와 높이(height)를 가진다.

<h1>Basic document flow</h1>
	<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p><p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
	<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
	<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not</p>

[코드] HTML 예시


h1 {
  background: gray;
  width: 60%;
}

p {
  background: rgba(255,84,104,0.3);
  width: 80%;
  height: 200px;
}

span {
  background: yellow;
  width: 100px;
  height: 100px;
}

[코드] CSS 예시

block : 줄바꿈이 되는 박스
inline, inline-block : 옆으로 붙는 박스

image


박스를 구성하는 요소

image

border (테두리)

p {
  border: 1px solid red;
}

<p 태그에 1px 빨간색 실선 추가>

border : 1px solid red;
의 코드에서 순서는 아래와 같다.
border-width(테두리 두께), border-style(테두리 스타일), border-color(테두리 색상)


margin (바깥 여백)

p {
  margin: 10px 20px 30px 40px;
}

<p 태그에 상하좌우에 여백을 추가>

top이 10px, right이 20px, bottom이 30px, left이 40px 으로 적용된다.
상하좌우 순서이다.


p {
  margin: 10px 20px;
}

<p 태그에 위아래, 좌우 각각 여백 추가>
top,bottom이 10px / left,right 20px 으로 적용된다.


p {
  margin: 10px;
}

<p 태그의 모든 방향에 여백 추가>
top,bottom,left,right 전부 10px로 적용된다.


padding (안쪽 여백)

테두리와 컨텐츠 사이라 생각하면 편하다!

p {
  padding: 10px 20px 30px 40px;
}

<p 태그에 상하좌우에 여백을 추가>
margin과 동일한 순서로 적용됨.


p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
  background-color: lightyellow;
}

박스를 벗어나는 콘턴체 처리
박스 크기보다 콘텐츠 크기가 더큰 경우!
콘텐츠가 박스 바깥으로 빠져나오게된다.


p {
  height: 40px;
  overflow: auto;
}

overflow 속성을 적용함으로서 스크롤을 추가할 수도 있고 가릴 수도 있다.!
overflow : auto; (콘텐츠가 넘치는경우 스크롤 생성)
overflow : hidden; (콘텐츠가 넘치는경우 가림)
overflow-x / overflow-y로 관리도 가능.
여백 설정을 고려하지 않은 박스 크기설정은
안쪽에 있는 박스가 밖에있는 박스크기를 벗어날 수 있다.


* {
  box-sizing: border-box;
}

<모든 요소에 box-sizing: border-box를 추가>
이렇게 모든요소에 적용을 하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
일반적으로 box-sizing은 HTML문서 전체에 적용한다.


#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}

위에 코드라고 가정했을 경우
box-sizing을 추가하지 않았을경우와 추가했을 경우를 나타내보자

image

맨위와 같이 box-sizing을 추가하지 않았을경우
content(300x200) 파란색 박스가 그대로 300px,200px로 적용되었다.

하지만!
아래와 같이 box-sizing을 추가하였을 경우
content(212x136) 파란색 박스가 212px, 136px로 줄어든 모습을 볼 수있다.
이 이유는 border사이즈와 padding사이즈를 포함한 크기로 계산되었기 때문이다.

*CSS 연습!!!!* -> CSS Exercises


오늘의 공부는 이렇게 끝냈다.
기본적은 HTML,CSS를 다루는 법을 배웠고
개념적인 내용들과 실습까지 해볼 수 있는 커리큘럼이
Urclass에 마련되어있어서 어렵지 않게 진행할 수 있었다.
사실 기존에 공부할때 어느정도 봤던 내용들이라 이해가 쉬웠기도했고
그 내용을 한번더 정리하는 느낌으로 꼼꼼하게 읽으니
알던 태그들도 조금도 정확하게 인지할 수 있던 것 같다.

오늘의 커피량: ☕️ ☕️ ☕️ ☕️️️️
오늘의 점심: 김치찌개, 소시지계란부침, 만두, 공기밥