1주차 개발일지-웹 시작하기

Chaejung·2022년 1월 31일

엘리스AI트랙4기

목록 보기

1/5

본격적으로 시작하기 전,

개발일지 형식을 어떻게 정하고 시작을 해야
총 24주차짜리 트랙에 대한 개발일지를
무사히 작성할 수 있을까 고민이 된다.
당장 HTML/CSS에 관한 내용이 주를 이루는 1주차에도
새롭게 알게 된 부분이 정말 많은데,
이것을 전부 여기 있는 개발일지에 넣기에는
무엇보다 시간이 부족하다.

그래서 새로 배운 내용에 대한 2단계 목차까지만 정리하고,

예시)

01-01 HTML/CSS 기초 			//0단계
    01 웹사이트의 정보와 디자인 		//1단계
    	웹사이트 제작시 고려 사항 		//2단계
            1. 웹 표준 			//3단계부터는 생략할 예정
            2. 웹 접근성
            3. 크로스 브라우징
        HTML 문서의 기본 구조
        HTML 태그의 두 가지 성격
        CSS
        CSS 선택자 종류
        부모 자식 관계
        캐스케이딩
        CSS 주요 속성
    02 웹사이트 레이아웃에 영향을 미치는 요소
    	박스 모델
        Block 요소와 Inline 요소
        마진 병합 현상
        레이아웃에 영향을 미치는 속성
        쇼핑몰 만들기

하루 공부한 것 중 코치님들께서 중요하다고 강조했던 부분
딱 한 가지씩만 추려서 글로 정리할 것이다.

기나긴 장정의 시작!
많은 기대 부탁드려요.

새로 배운 내용

01-01 HTML/CSS 기초 (01/11)

전체 목차

01 웹사이트의 정보와 디자인
    웹사이트 제작시 고려 사항
    HTML 문서의 기본 구조
    HTML 태그의 두 가지 성격
    CSS
    CSS 선택자 종류
    부모 자식 관계
    캐스케이딩
    CSS 주요 속성
02 웹사이트 레이아웃에 영향을 미치는 요소
    박스 모델
    Block 요소와 Inline 요소
    마진 병합 현상
    레이아웃에 영향을 미치는 속성
    쇼핑몰 만들기

중요한 부분

웹사이트의 정보와 디자인>캐스케이딩

CSS의 우선순위를 결정하는 세 가지 요소가 있다.

작성한 순서

<head>
  <style> 
    div { color: red; } 
    div { color: blue; }
  </style>
</head>
<body>
  <div>나중의 것이 적용된다.</div>
</body>

/*나중의 것인 color: blue만 적용*/

구체적인 정도

<head>
  <style> 
    article div { color: blue; }
    div { color: red; } 
  </style>
</head>
<body>
  <article>
	  <div>더 구체적으로 작성된 선택자가 적용된다.</div>
  </article>
</body>

/*더 구체적으로 작성된 color: blue만 적용*/

선택자
style>id>class>type 순위로 우선순위가 높다.

<head>
  <style> 
    div { color: red; } 
    .classC { color: blue; }
  </style>
</head>
<body>
  <div class="classC">type과 class의 경우</div>
</body>

/*class로 할당한 color: blue만 적용*/

<head>
  <style> 
    div { color: red; } 
    .classC { color: blue; }
    .idC { color: green; }
  </style>
</head>
<body>
  <div class="classC" id="idC">type과 class와 id의 경우</div>
</body>

/*id로 할당한 color: green만 적용*/

<head>
  <style> 
    div { color: red; } 
    .classC { color: blue; }
    .idC { color: green; }
  </style>
</head>
<body>
  <div class="classC" id="idC" style="color: yellow;">
    type과 class와 id와 inline style의 경우
  </div>
</body>

/*inline style로 할당한 color: yellow만 적용*/

출처: 엘리스 학습센터

01-02 수요일 실시간 집체 강의 (01/12)

전체 목차

01 이고잉 코치님 이론 강의
    ping 사용법
    코치님께서 하신 말씀
    참고 사이트
    반찬 타임
    전체 커리큘럼 오리엔테이션
    VSCode 설치
    HTML
    인터넷과 웹의 차이
    Hosting=Cloud
    github에서 웹사이트 링크 생성하기
02 강선규 코치님 실습 강의
    .list p {} vs .list>p {}
    color vs background-color
    id vs class
    css 속성 예시

중요한 부분

css 속성 예시_요소 가운데 정렬

<style>
  p {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	height: 100vh; //스크린 기준 전체 페이지 높이
  }
</style>

01-03 웹 사이트 제작 (01/13)

전체 목차

01 움직이는 웹사이트 제작
    01 Transform
    02 Transition
    03 Animation
    04 Transform & Transition
    05 메뉴 영역 애니메이션
    06 본문 영역 애니메이션
02 반응형 웹사이트 제작
    01 미디어쿼리 소개
    02 미디어쿼리 사용 시 주의사항
    03 미디어쿼리 적용하기

중요한 부분

미디어쿼리

: 모바일에 대응되는 반응형(자연스러운 변화) 또는 적응형(뚝뚝 끊기는 변화) 웹사이트를 만들 때 사용되는 CSS 구문

<head>
    <style>
        /*hover쓸 때 띄어쓰기 없음 주의*/
        ul li:hover { 
            box-shadow: 0 0 5px grey;
            background: white;
            border-radius: 2px;
            color: goldenrod;
            transform: scale(2) translate(10px,0px);
        }
        header > ul{
            display: flex;
            justify-content: space-around;
        }
        .bar { 
            width: 20px;
            border: 3px solid black;
            background-color: black;
            border-radius: 2px;
            margin: 3px;
            display: none;
        }
      /*미디어 쿼리*/
        @media (max-width: 420px) {
            .bar {
                display: block ;
                margin-left: auto;
                margin-right: auto;
            }
            header > ul {
                display: none;
            }
        }
      /*즉 조건이 성립될 때 css 적용을 새롭게 지정하는 것인데,
      여기는 display 속성을 이용해서 없었던 것(.bar)을 보이게,
      있던 것(header > ul)을 보이지 않게 바꾸는 것이다.*/
    </style>
</head>
<body>
    <header>
        <div class="hamburger_tab">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
        <ul>
            <li>HOME</li>
            <li>DETAIL</li>
            <li>PRODUCT</li>
            <li>EVENT</li>
            <li>ABOUT</li>
        </ul>
    </header>
</body>

hover 적용한 결과

미디어 쿼리 적용한 결과
화면 너비를 420px 이하로 줄였을 때

출처: 엘리스 학습센터

01-04 금요일 실시간 집체 강의 (01/14)

전체 목차

01 이고잉 코치님 이론 강의
    코치님께서 하신 말씀
    반찬 타임
    선택자의 우선 순위
    박스 모델
    grid
    부트스트랩
    템플릿 사용해보기
02 강선규 코치님 실습 강의
    inline과 block의 차이
    영역 구분의 방법
    버튼 디자인
    git

중요한 부분

단축키 모음

html>(head+body)
기본 틀 자동 생성
ctrl+enter
태그 사이에서 다음 줄로 바로 넘어감
ctrl+shift+enter
태그 사이에서 윗 줄로 바로 넘어감
alt+드래그
떨어져 있는 동일한 것들 멀티셀렉트

git 원격 저장소에 push 하기

gitlab에서 create blank project > initial~README.md 체크 한 뒤 create
git 파일을 받을 경로에서 git 프로그램(git bash) 실행
$ git clone {git사이트에서 생성한 레포지토리의 html 주소}
지정한 주소에 git repository와 같은 이름으로 생성된 파일을 VSCode로 열기
$ cd {푸쉬할 파일이 있는 폴더 경로}
푸쉬할 파일이 있는 폴더로 이동 해야 한다
$ git add index.html
$ git status
무슨 상태인지 확인 가능
$ git commit -m "커밋할 메시지"
$ git push origin master
gitlab에서 푸쉬한 index.html 확인 가능

01-05 Git을 사용한 버전 관리 (01/15)

전체 목차

01 Git이란?
    Git을 사용하는 이유
    Git의 장점
    Git 설치와 초기 설정
    Git 저장소 생성
02 Git 시작하기
    파일 영역의 라이프 사이클
    파일의 상태 라이트 사이클
    01 Git 파일 생성
    02 Git 저장소
    03 Git 관리 상태 확인
03 Git 가지 치기
    01 Git Branch
    02 fast-forward
    03 Merge
    04 conflict 해결
04 Git 원격 저장소
    01 원격 저장소 받아오기
    02 원격 저장소 동기화
    03 Origin이란?

중요한 부분

원격 저장소 활용하기

로컬 저장소와 연결

$ git remote add origin(또는 다른 원격 저장소 이름)

원격 저장소의 내용 동기화
2-1. pull 이용한 저장소 갱신
```
$ git pull
```
원격 저장소에서 데이터를 가져와 자동으로 로컬 데이터와 병합한다.
2-2. fetch 이용한 저장소 갱신
```
$ git log
```
변경된 파일을 확인한다
```
$ git merge origin/master
```
master와 origin/master가 서로 병합된다.
원격 저장소로 전달

$ git push origin master

출처: 엘리스 학습센터

고민한 내용

.list p {} vs .list>p {}

로 수업했지만
예시는 div.class2 h2 vs div.class2>h2로 만들어 보았다.

<head>
    <style>
        li {color: pink;}
        .class2 {color: red;}

        div.class2 h2 {color: blue;}
        div.class2>h2 {color: green;}
    </style>
</head>

<body>
    <ol>
        <li class="class1">item1</li>
        <li class="class2">item2</li>
        <div class="class2">
            <h2>item3</h2>
            <h2>item4</h2>
            <h3>item5</h3>
            <div>
                <h2>item6</h2>
            </div>
        </div>
    </ol>
</body>

구현 화면

'>' 유무의 차이는
자식 요소만 지정할 것이나 말 것이냐 차이이다.
즉, 위 예시처럼 div.class2 h2로 선택자를 설정한 경우,
class2를 클래스 이름으로 가진 div 안의
div 안의 h2가 선택되어 파란색으로 나타났다.
그런데 div.class2>h2로 선택자를 설정한 경우,
class2를 클래스 이름으로 가진 div의 자식 중
h2만이 선택되어 초록색으로 나타나게 된 것이다.
부모-자식은 바로 한 단계 상위 또는 하위 관계에서만 성립하므로
나타나게된 특징이다.

id와 class의 차이

id: 고유하기 때문에 한 요소당 하나씩만 부여 가능
? 이 고유한 값을 다른 태그에 여러 개 부여 가능한가?
-> 가능하다!
? 한 태그에 여러 id 부여 가능한가?
-> 불가능하다 (class와의 결정적인 차이)
class: 띄어쓰기로 구분하여 여러 개 부여 가능

<head>
    <style>
        .class2 { color: red; }
        .class3 { font-style: italic; }
        #id1 { background-color: aqua; }
        #id2 { background-color: blueviolet; }
    </style>
</head>

<body>
    <ol>
        <li class="class1" id="id1">
          <h2>item1</h2>
      	</li>
        <li class="class2 class3">
          <h2>item2</h2>
      	</li>
        <div class="class2">
            <h2 id="id1">item3</h2>
            <h2 id="id2 id3">item4</h2>
        </div>
    </ol>
</body>

구현 화면

id는 고유한 값이라 한 요소에만 강조하고 싶을 때 할당하면 된다.
그런데 사실 다른 요소에 동일한 id 값을 할당해도
똑같이 css가 적용된다.
#id1을 item1과 item3에 적용해보니 된다.
중요한 것은 item4를 보면 id값을 id2 id3
이렇게 두 개 이상 할당했을 때는
css가 적용이 안된다.

반면 class의 경우 item2를 보면
.class2 .class3 둘 다 성공적으로 적용된 것을 볼 수 있다.

참고한 블로그/사이트

이고잉코치님께서 추천해주신 사이트
https://www.w3schools.com/
크롬에서 웹서버 만들기
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en
임시적인 글이 필요할 때 생성하는 사이트
https://loremipsum.io/
http://guny.kr/stuff/klorem/
문제있는 코드 공유하고 싶을 때 구현된 웹페이지 자체를 공유할 수 있는 사이트
http://jsbin.com/?html,output
github page 사용 참고 사이트
https://application-s.tistory.com/entry/Github-pageGithub%EB%A1%9C-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0
부모 자식 구조 참고 사이트
https://creatorjo.tistory.com/70
class vs id 참고 사이트
https://bangu4.tistory.com/26
css 넣는 세 가지 방법
https://www.w3schools.com/css/css_howto.asp
html tag 빠르게 생성하기
https://docs.emmet.io/abbreviations/syntax/
css 컨닝페이퍼
https://htmlcheatsheet.com/css/
selector 게임
https://flukeout.github.io/
문법 써도 될 지 의문일 때
https://caniuse.com/
댓글 다는 기능
https://disqus.com/
css에서 애니메이션 적용하기
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations
css flex 연습할 때
https://flexboxfroggy.com/#ko

자체 피드백

2일차 때 처음 만든 웹페이지
https://blcklamb.github.io/web-eliceClassExercise/
생각보다 잘 만들어서 만족스럽다!

개발일지 적는데 꽤 오래 걸린다...
거의 세시간이 소요됐는데...
스포를 아주 살짝 하자면
막 3주차 강의를 끝낸 사람으로서
1주차가 이 정도면 3주차는 거의 5시간 걸리겠는데...?
라는 생각이 솟는다.

이걸 조금 더 빠르게 작성할 수 있는 방법이 없을까.
하루가 가기 전 필기를 정리하는 것을 미리 해둘까?

생각해보면 개발일지 틀을 짜는데에 시간이 조금 걸린 것 같은데,
이미 짜여졌으면 다음부터는 조금 빨라지지 않을까하는
기대를 해본다.

출처: 엘리스 학습센터

협업에 대한 생각

git을 배운 지 2주차 지나가는데,
확실한 것은 세세한 부분을 까먹기 시작한다는 것이다.
일단 깃 관련 서적을 도서관에서 대출했으나
한 달 이상 연장과 방치를 반복했는데,
밀린 개발일지와 강의를 들으면서
하나씩 실습을 해야할 필요성을 느꼈다.

프로젝트 아이디어

아직은 없다!

한 줄 평
항상 처음은 설레고 불타오르는 게 당연!

Chaejung

프론트엔드 기술 학습 및 공유를 활발하게 하기 위해 노력합니다.

다음 포스트

1주차 개발일지-웹 시작하기

엘리스AI트랙4기

본격적으로 시작하기 전,

예시)

새로 배운 내용

01-01 HTML/CSS 기초 (01/11)

전체 목차

중요한 부분

웹사이트의 정보와 디자인>캐스케이딩

01-02 수요일 실시간 집체 강의 (01/12)

전체 목차

중요한 부분

css 속성 예시_요소 가운데 정렬

01-03 웹 사이트 제작 (01/13)

전체 목차

중요한 부분

미디어쿼리

01-04 금요일 실시간 집체 강의 (01/14)

전체 목차

중요한 부분

단축키 모음

git 원격 저장소에 push 하기

01-05 Git을 사용한 버전 관리 (01/15)

전체 목차

중요한 부분

원격 저장소 활용하기

고민한 내용

.list p {} vs .list>p {}

id와 class의 차이

참고한 블로그/사이트

자체 피드백

협업에 대한 생각

프로젝트 아이디어

2주차 개발일지-자바스크립트 I

0개의 댓글

관련 채용 정보