웹개발 종합반 - 1주차 마무리

웹개발 종합반 - 1주차 마무리

2023. 3. 20. 15:54ㆍ스터디/항해 99

HTML, CSS 활용 정적 웹 페이지 작성
- 브라우저의 역할
- HTML 문서의 구조
- VSCode의 활용
- CSS 학습
- git pages를 통한 html 배포

서버에 요청하는 역할. 서버는 브라우저의 요청에 따라 HTML, CSS, Javascript를 보내준다.

태그로 이루어져 있다.

크게 head 영역과 body 영역으로 구분 할 수 있다.

<head>
</head>

<body>
</body>

head 영역에는 웹사이트 검색 시 사용되는 meta정보와 css, script 등 페이지 자체에 대한 정보들이 담긴다.

body 영역에는 문서의 내용과 관련된 정보들이 담긴다.

개발을 편리하게 도와주는 에디터중 하나인 VSCode를 설치 후 확장프로그램을 설치하는 작업을 하였다.

VS Code - 맥 M2 (애플실리콘) 설치
- https://update.code.visualstudio.com/1.73.1/darwin-arm64/stable
LiveServer - 화면 분활 해서 실시간으로 랜딩 됬다고 가정하에 보여줌.
Korean Language Pack for Visual - 한글 확장프로그램

일주차에 배운 많은 CSS들 중에서 특정 클래스에 특정 동작이 이루어졌을때 특정 css style 이 적용되도록 하는 부분을 학습하였다.

display, flex 관련 CSS 집중 공부

display: flex; flex-direction: column; align-items: center; justify-content: center;

<style>
.className{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>

<style>
.className > tag {
    width:250px;
    height:50px;
    background-color: transparent;
}
</style>

<style>
.className > tag:hover {
/*특정 이벤트가 발생한 태그에 대한 스타일 지정*/
    width:250px;
    height:50px;
    background-color: transparent;
}
</style>

티스토리툴바