- 시작하게 된 계기 및 다짐 😮
-
이번 코드스테이츠의
백엔드 엔지니어링 개발자 부트캠프에 참여하게 되면서 현직개발자 분들의 빠른 성장을 위한 조언 중 자신만의 블로그를 이용하여 배운 것 들을 정리하는게 많은 도움이 된다 하여 시작하게 되었다.- 그 날 배웠던 것을 길지 않아도 좋으니 정리하며 복습하는 습관 기르기
- 주말에 다음주에 배울 내용들을 예습
- 코딩 문제와 java코드들은 꾸준히 학습
- 학습 목표 😮
| 목표 | 결과 |
|---|---|
| Frontend_Base - HTML,CSS,JS 이해 | O |
| HTML,CSS 주요 요소 이해 | O |
| 시맨틱 태그, 기본적인 HTML구조 작성 | O |
| CSS : Selector,Class,id, Box_Model 이해 | O |
- 정리
HTML
#HTML : Tree 구조처럼 Tag를 이용한 구조
#Markup 언어 : Tag등을 이용한 문서or데이터의 구조 명기
#Tag : 부등호(<>)로 묶인 HTML 기본 구성요소
#메타데이터 : 데이터의 여러 정보를 나타내는 구성요소
#시멘틱 요소 : 그 자체에 의미를 가지고 있는 요소로, 태그만 봐도 알수 있는 태그
<tag/> : 태그 내부에 내용이 없을시, 사용가능형태
<img> : img src = "이미지 주소"
==> alt = " " : 그림이 뜨지 않을시 나타낼 언어
<a>: <a href="주소", target="_blank(새창)">이름</a>
<link> : <link rel="stylesheet" href="**.css" >
<ul,orl>&<li> : 순서가 없고 있는 리스트, 리스트
<input> : text,radio(name 옵션(그룹)),checkbox, < type="", placeholder="">
<textarea> : 메모장 같은 다중라인
==> 입력폼
<button> : 버튼
<div> : 태그 당 한 줄을 차지
<span> : 컨텐츠의 크기만큼 공간차지 -> 줄바꿈 x
<p> : 하나의 문단
<section> : div보다 큰 구역을 구분하기 위해 사용됨
<header> : 본문 안에서의 제목 역할 태그
(etc, header,main,nav,aside,footer,div )
CSS
#CSS : UI의 가독성과 편리성을 제공하기 위함 -> HTML_view 변경
#시멘틱 태그 : 각 태그들의 역할을 빠르고 쉽게 이해할 수 있는 태그
# css와 html을 분리하지 않고 한번에 사용방법(권장x)
하나의 요소를 여러(두개이상) 클래스에 적용 방법
class ="class1 class2"
# 웹 폰트 기술 : 개발자가 표현하고 싶은 글꼴을 사용자 기기에 적용하도록 웹에서 다운로드 하게 하는 기술
rem : 루트 기반 크기조절
text-align : 정렬 (left,right,center,justify)
vertival-align : 세로 정렬(Inline 요소에만 적용가능,직접)
align-items : 부모요소에 사용 -> 자식에게 적용
margin : box 바깥 너비, padding : 박스 내 너비
★css 파일과 html 파일 연결
<link rel="stylesheet", href="index.css(파일이름)"/>
- rel : 연결하고 하는 파일 역할/특징
- href : 파일의 위치
layout : html의 태그 배치 관련
css : html 스타일 적용
<nav style="background:#eee, ; color : blue">....</nav>
==> style 태그를 이용하여 여러 옵션을 주는 방법
id : 특정 태그를 지칭, 요소 적용시 사용, 단일로 특정 태그에만 사용 => #id이름
class : 여러 태그에 스타일 적용 id랑 비슷 => .class이름
font-family : 글꼴 설정 ex)verdana,SF Pro KR
fallback - 해당 글꼴이 없을시 다음 글꼴 사용하게
- ex) font-family : "verdana", "MalguGothic"
font-size : 글자 크기 변경
- 절대 단위 : px,pt -> 기기나 브라우저에 영향 받지 않음
- 상대 단위 : 드, %, rem등 -> rem추천, 영향을 받음
# em vs rem : rem은 최상위 태그 font사이즈 기반
em은 현재 태그 font 사이즈 기반
viewport(vw,vh) : 화면에서 나타낼 비율 정도
block : 줄바꿈이 되는 박스
inline : 줄바꿈이 없고, 크기지정 x
inline-block : 줄바꿈이 없고 block박스의 특징을 가지는 박스
==> inline 박스내 display : inline-block
margin : 위,오,아,왼 (1개좌우,2개상하좌우,4개상우하좌)
margin-top : - 음수도가능, 줄어듬 간격이
border : 테두리 , 1px solid red
(마블팩-순서)
margin->border->padding->content
box-sizing : content-box -> 실제너비(border), 측정크기(content)까지
border-box -> 실제너비(border), 측정크기(border)까지
==> border 까지의 길이
CSS_Selector
* : 전체 선택 셀렉터
header h1 {} : 후손 셀렉터 -> 모든 후손 선택
header > p { } : 자식 셀렉터 -> 자식(여러개 가능)
section + p { } : 인접 형제 셀렉터 -> 인접한 형제만
section ~ p { } : 형제 셀렉터
a : link {} : 가상 클래스 -> 특정 이벤트에 의해 발행
input:checked + span { } : 요소 상태 셀렉터 -> 특정 상태일때 발생
input:not([type="password"]) { } : 부정 셀렉터
input[type="text"]:valid { } : 정합성 확인 셀렉터
그 외,
li:last-child { } : 마지막 자식인 li
★태그의 사이에 ' '공백이 있을시 후손!!!
- 피드백 😮
- 백엔드 개발자를 위해 공부를 하고있지만 오늘 간단하게 프론트엔드에서 사용하는 언어를 배우고 사용해 보았는데 이 후, 서로간의 의사소통을 좀더 원활히 하기 위하여 서로의 일을 좀더 배워도 좋을 것 같다.
- 앞으로 해야 될 것 😮
- 꾸준히 velog 작성
- Java 언어 및 Algorithm 공부
- 코딩테스트 대비
- 틈틈히 운동 하기
Will be great Backend-developer