코딩/웹개발 A to Z

웹 개발 A to Z - 1주차

Funold 2023. 10. 10. 11:42

웹개발이란 - 웹,홈 페이지를 만드는, 개발하는 기술이다.
웹이란 무엇인지, 꾸미는 방법에 대해.
웹 = 개발의 기초 후 - 서버, 보안, 앱 
javascript 웹페이지를 동적으로 만든다.

웹 브라우저의 작동 원리
클라이언트 = 요청 / 서버 = 주는이
HTML = 청사진
CSS = 꾸미기도구
JavaScript = 기능 추가 도구

Microsoft VS Code 설치
-open in browser 설치 = 
-Korean Language Pack for Visual 설치 = 한국어 지원

프로젝트 폴더 생성 - VS에서 해당 폴더 선택
- 탐색기에 tags.html 생성 - 코드창에서 html:5(html 자동완성) 입력하면 페이지 기본 양식이  뜸

*HTML
- HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드입니다! 웹의 전반을 HTML을 통해서 작성할 수 있습니다!
- CSS는 HTML을 통해 작성된 뼈대를 예쁘게 꾸며주는 코드입니다!
- 하지만 CSS를 잘 사용할 줄 아는 것과 '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.

- html은 head/페이지의 속성 정보(상단 아이콘,제목,CSS,meta, script, style, link, title) 와 body/페이지의 내용(뼈대,태그,span, img, input, textarea) 로 나뉨

-태그들은 외워서 쓰지 않는다. = 필요한 태그가 있으면 검색해서 사용 가능.
-초기 배우는 중엔 하나 입력하고 확인하는 습관이 있으면 좋다.

CSS 기초 - 꾸미기 위해서는 지칭 할 수 있는 대상이 중요하다.
ㄴcss는 head에
margin 바깥과의 여백 / padding 안쪽과의 여백
ㄴ구역 순서:  상-우-하-좌

**<div>=공간 을 잘 활용하자
***줄 맞춤이 생명! Alt+shift+F!

tc/* 전체 적용
tc/*정렬세트
-display: flex;
-flex-direction: column(or 'row');
-align-items: center;
-justify-content: center;
tc/'.지정태그 {}' = 스타일 지정
tc/'.지정태그 > 내부태그 {} = 해당태그 내 태그 스타일 지정
tc/sold : 실선

'코딩 > 웹개발 A to Z' 카테고리의 다른 글

웹 개발 A to Z - 5주차  (0) 2023.10.10
웹 개발 A to Z - 4주차  (0) 2023.10.10
웹 개발 A to Z - 3주차  (0) 2023.10.10
웹 개발 A to Z - 2주차  (0) 2023.10.10