#슈퍼코딩 1일차
- TO-DO LIST -
1강 Orientation ~ 12강 CSS란? - 웹페이지를 Awesome하게 강의 듣기
일일보고 작성하기
- 배운 내용 요약 정리 -
개발은 학문이 아니라 훈련에 가깝다
포지션을 정확히 이해하고 포지션의 역할을 충실히 해야 한다
모든 걸 알 필요는 없다
검색을 잘 하는 것도 개발자의 능력이다
(이 부분에서 크게 용기를 얻었어요 ㅜ ㅜ)
컴퓨터처럼 생각하려면?
분해 : 큰 문제를 작게 쪼개서
패턴인식
추상화
알고리즘 : 문제 해결 과정을 단계적으로
디자인 참고 사이트
<프론트 엔드>
html
사용자들이 볼 수 있는 내용들
뼈대
css
색상, 크기, 폰트, 레이아웃 등의 시각적인 표현
살, 옷
Javascript
프론트엔드의 동적인 요소 추가
이벤트 처리
신경
프론트엔드 개발자의 역할
디자인 및 레이아웃
사용자 경험(UX) 개선
백엔드와의 소통
VScode 쓸만한 확장 프로그램들
indent-rainbow
코드를 작성하다 보면 들여 쓰기가 많아지는데 그런 부분들을 색깔로 구분해서 같은 덩어리끼리 구분이 쉬움
Korean Language Pack for Visual studio Code
한국어니까......
Prettier - Code formatter
내 기준 정말 강추하는 기능
자질구레한 것들이랑
(문장 마지막에 ; 안 쓰면 자동으로 써줌)
줄 맞추기 잘 해줌
HTML
index.html 은 개발자들의 관용적인 표현이다.
어떤 문서의 진입점이 되는 것
html 코드
div : 한 공간(줄)을 차지
span : 인 라인 태그 / 옆으로 이어서 작성 가능
header / main / footer / section / nav / aside : 레이아웃 태그
코드의 가독성 및 협업을 위해서 사용
셀프 클로징 태그 : 태그 사이에 다른게 올 수 없음
<br> / <hr> / <input> /<img> / <link> 등
태그는 다 외울 필요가 없음(감사합니다)
구글에서 html (검색어) mdn 검색 하면 다 나옴
html은 프로그래밍 언어가 아니다
마크업 언어이다.
회원가입 페이지 따라 하기
form 태그는 아래 태그들을 감싸는 큰 태그
label 태그와 input 태그는 같이 다니게 하자. label의 for과 input의 id를 동일하게 해야 한다.
<label for="check_1">체크하세요</label>
<input id="check_1" type="checkbox" />
이렇게 입력란 안에 '이메일 입력'이라는 글자는 placeholder를 사용
<input type="email" placeholder="이메일 입력" />
required는 입력 안 하면 하라고 해줌
양식 제출이 안됨
<input type="email" required placeholder="이메일 입력" />
CSS(Cascading Style Sheets)
Cascading이 순차적인이라는 의미로
위에서 아래로 진행이 된다고 보면 됨
중복 코드를 작성하면 가장 마지막에 있는 애가 적용이 됨
css 적 용 방법은 3가지가 있음
태그 자체에 적용(inline 방식)
<div style="background-color: red">슈퍼코딩</div>
html 내에 style를 만들어서 적용(internal 방식)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
background-color: green;
}
</style>
</head>
css 파일을 만들어서 head에 링크를 거는 방법(external 방식)
- 부족한 점 -
당연히 아직은 부족하지만 그래도 오늘 진행한 것은 계속해서 연습했던 부분이고 개발의
기초라서 그런지 쉬웠다
- 스스로 시도해 본 것들 -
스크래치 사이트를 통해 과제로 내주신 빵 먹는 박쥐를 해봤고
2023.06.26 - [개발공부] - [슈퍼코딩] 1일차 중 스크래치 -블록형 프로그래밍 언어 / 노코드, 재미
MDN을 통해서 오늘 배운 INPUT 태그의 다양한 속성들을 다뤄봤다
- 회고 -
슈퍼코딩이 정식으로 열리기를 기다리면서 사전 강의를 통해 어느 정도 공부를 했었지만
다시 처음부터 보니까
아 맞다!! 이런 것도 있었지?
라고 생각하면서 재밌게 할 수 있었다.
하프타임이라 하루에 공부를 할 수 있는 시간이 부족하지만
최대한 몰입해야겠다.
'개발공부' 카테고리의 다른 글
| CSS 박스 배치 (2)__position (4) | 2023.06.27 |
|---|---|
| css 박스 모델과 display flex (1) (0) | 2023.06.27 |
| [슈퍼코딩] 1일차 중 스크래치 -블록형 프로그래밍 언어 / 노코드, 재미 (0) | 2023.06.26 |
| < / > 클론 코딩-Wordle(게임)__3 자바스크립트 (0) | 2023.06.26 |
| < / > 클론 코딩-Wordle(게임)__2 자바스크립트 (8) | 2023.06.26 |
