오즈코딩스쿨/디자인부트캠프과정

[디자인부트캠프] DAY46. 웹 구조 및 서비스 데이터 추척_ 디자이너를 위한 개발 지식_1

chill0 2025. 6. 25. 16:57

기능사 준비하던 내용이 나올 줄 몰랐다. 

사실 자격증도 필요없고,, 코딩 필요없다 이런 말을 너무 많이 들어서 

괜한 공부한 것같고 쫌 시무룩했는데...

교육과정에서라도 쫌 써먹겠구나 싶었다. 

 

 

PART1. 오늘의 내용

HTML/ CSS/ JS

 

HTML은 웹페이지의 구조, 뼈대

CSS는 디자인

JS는 기능과 동작 이다. 

 

요즘은 거의 VSCODE로 코딩을 한다.

 

 

VSCODE

 

굉장히 많은 확장프로그램을 추천해주셨다. 

이 중 내가 써본건 라이브서버뿐이다. 

이마저도 실제 시험 환경에서는 쓰지 못한다.

 

 

HTML 

 

1. html5문서임을 선언

 

처음에 HTML 파일에 선언하기 위해선 [ !+탭] 을 입력한다. 

보통내가 입력후에 한 작업은, eg를 ko로 바꿔주고, 타이틀명을 적어줬다. 

 

2. <html>, <head>, <body>

 

웹문서의 기본 구조

body 태그안에 레이아웃을 짠다.

나는 웹페이지를 만드는 걸 공부했어서

wrap, inner, header, contents, footer 를 이용해서

기본 레이아웃 구조를 만들었다. 

 

3. 제목태그 <h1>~<h6>

 

h1태그가 가장 크다

꼭 제목으로 쓰지 않아도 

자동으로 텍스트 크기 조절 용으로도 쓴다. 

사실 깔끔하게 구분을 위해 썼다.

스타일은 css에서 거의 정한거 같다.

 

4. 문단 <p>

 

5. 링크 <a>

 

6. 이미지 <img>

 

나도 공부하면서 배운거지만 

파일명은 영어로만, 띄어쓰기도 없어야한다. 

실시간강의 때 몇몇 수강생들이

오류가 나는 원인이기도 했다.

 

7. 목록 <ul><li><ol>

 

코딩은 정리다.. 

코딩은 정리를 잘 해둬야한다는걸

느꼈다. 그래서 시멘틱태그를 적절히 활용해서 쓰자.

 

8. 구분선: <hr> / 줄바꿈: <br>

 

 

이 외에도 많은 태그가 있지만 

오늘 강의에서 배운 내용정도만 정리했다. 

 

 

PART2. 오늘의 과제

 

 나는 갑자기 하나에 심하게 꽂힐 때가 있는데 질릴때까지 파야한다.

어젠 갑자기 다시 악기에 꽂혀서 클래식까지 갔다. 

안그래도 요즘 노래가 다 질렸었는데,,,

한동안은 클래식을 들을 것 같다.
그러다가 알고리즘이 쿄카를 자꾸 보여줘서 

자꾸 보다가 홀딱 반했다. 

춤 겁나 잘추는데 저렇게 옷까지 잘입고 귀여울 일인가; 

 

 

html작성하고 css로 살짝꾸며줬다.