| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
- microsoft ai school
- micsrosoft ai
- msai
- 마이크로소프트 AI
- MS
- 마이크로소프트 ai 스쿨 6기
- microsoft ai
- 마이크로소프트 ai 스클
- microsoft
- 마이크로소프트
- microsoft ai school 6기
- 마이크로소프트 ai 스쿨
- 마이크로소프트 ai school 6기
- Today
- Total
연랩
[Microsoft AI School 6기] 2/27(47일차) 정리 - HTML/CSS/JS (1) 본문
[Microsoft AI School 6기] 2/27(47일차) 정리 - HTML/CSS/JS (1)
parkjiyon7 2025. 2. 27. 17:51HTML/CSS
환경 설정
VS code 내에 설치
Material Icon Theme 설치
우측에 확장자(블록 모양) 선택
위측에 material icon theme 선택
Prettier 설치
확장자에서 검색 후 설치
좌측 하단의 설정 > 설정
formatter 검색 후 prettier로 지정
format on 검색 후 format on save에 체크를 한다
가독성을 위해 2로 설정
html을 검색하여 format enable을 체크한다
css랑 js도 똑같이 해준다
linked editing도 검색하여 체크해준다
auto rename tag 설치
css peek 설치
live server 설치
live server 사용을 위해 chrome을 기본 브라우저로 설정
맥북의 경우
좌측 상단 사과 클릭 > 시스템 설정 > 데스크탑 및 Dock > 기본 웹 브라우저
에서 변경 가능
HTML 사용
우측 하단의 Go live 누르면 브라우저에 창이 뜬다
혹은 해당 html 파일에서 우측클릭하여 브라우저에 표현할 수 있다
파일 저장 시 브라우저가 최신화되어 나타난다
html 파일에 !을 치면 기본 골격이 나타나며, 이를 사용하여 간단히 살펴 보면 다음과 같다
CSS 사용하기
html의 요소 별로 태그를 사용하여 css에서 디자인 할 수 있다
이를 html과 연결하기 위해서는 html 헤더에 추가한다
Tip!
link라고 치면 자동으로 css를 완성하여 준다
style을 적용하는 다양한 방법
1) header에 style tag
- 나중에 쓴 것이 앞에 쓴 것을 덮어쓴다
2) 태그에서 직접 지정
- 태그에서 직접 지정한 것이 가장 우선 순위가 높다
3) css 파일에서 지정
Java Script 사용
- body 닫기 전에 보통 js 지정
Tip!
자동완성 이용 가능
html이랑 js 연결하기
- js는 웹 문서의 해당 요소들을 제어하기 때문에 요소들이 모두 생성되고 나서 실행되어야 안정적
js 파일에서 선택자를 지정하여 행동을 부과
실행 결과는 위와 같다
html 안에서도 js 작성이 가능
클릭하면 아래와 같이 배경 색이 바뀐다
태그에 직접 연결도 가능
p 태그에 alert 기능을 추가하였다
위와 같이 결과가 나온다.
HTML
Hyper Text Markup Language
html 구조
<html>~</html>
웹문서의 시작과 끝을 나타내는 태그
<head>~</head>
웹브라우저가 웹문서를 해석하는 데 필요한 정보
<body>~</body>
웹브라우저 화면에 나타나는 내용
html 구성요소
html 주요 태그
HTML 실습
제목 태그 h1~h6까지 사용 가능
p 태그 사용
앞 뒤에 padding이 자동으로 추가됨
br 태그
문단 내에서 줄바꿈 사용
pre 태그
pre 태그는 입력한 서식 그대로 출력
pre태그는 입력한 서식 그대로 출력
div 태그
- 주변 내용과 분리되어 새줄에서 시작
- 전체 가로 폭 차지
- 페이지 레이아웃, 색션 구분 등 문서 구조화에 사용
span 태그
- span은 자동 줄바꿈을 지원하지 않음
- 줄바꿈 없이 텍스트 흐름 내에서 사용
- 주로 텍스트 일부분에 스타일을 적용할 때 사용
ex) div 내에서 텍스트 강조
strong/bold
em/i
em 태그의 경우 시각장애인을 위할 때 강조된다고 한다
하이퍼링크
a 태그
Tip!
a를 치고 자동완성으로 href가 제공된다
하이퍼링크 연결
해당 코드를 실행하면 아래와 같은 화면이 나온다
여기서 naver열기를 누르면
네이버가 열린다.
새탭에서 열고 싶은 경우 target을 지정한다
이와 같이 새탭에서 작성이 됨을 알 수 있다
title을 지정하면 아래의 링크에 마우스를 가져가면 제목이 나타난다
다운로드
위와 같이 개발환경구축.pdf로 다운로드 됨을 알 수 있다
target을 사용할 경우, 새로운 탭에서 내용이 보인다
a 태그를 통한 이동
section2 클릭 <-> section1로
클릭시 서로 이동
목록 태그
순서가 있는 목록 태그
다른 마커로 나타내고 싶으며 type을 제공하여 주면 된다
순서가 없는 목록 태그
다양한 type으로 변경이 가능하다.
dt/dd
Table
아래와 같이 테이블을 작성한 결과를 보면 다음과 같다
th는 가운데 정렬됨을 알 수 있다
Tip!
tr*3>td*3 하면 자동완성 기능이 있다
순위(1, 2, 3) -> th로 변경
CSS를 이용한 테이블 테두리 그리기
그 외 여러가지 스타일 옵션을 주어 보기 좋게 시각화할 수 있다.
다른 예시를 살펴보면 다음과 같다
셀 병합
rowspan, colspan 사용
서울과 부산의 미정이 병합되었음을 알 수 있다.
이미지 및 멀티미디어
이미지
<img src="이미지 경로">
원본 크기 그대로 이미지가 나옴을 알 수 있다
이미지 비율 조정
- 픽셀
- 비율
위의 픽셀로 정한 이미지들의 화면의 사이즈 변화에 따라 변화지 않지만, 비율의 경우 부모 요소의 비율에 따라 이미지 크기가 변한다.
멀티미디어
오디오
- 자동 재생은 권장되지 않는다
비디오
소리가 있는 비디오의 경우, 소리도 같이 난다.
위와 유사한 방식으로 사이즈를 변경할 수 있다.
- 이미지, 오디오, 비디오의 경우 인라인 요소이다
- 인라인 요소와 블록레벨 요소를 잘 구별할 수 있어야 한다.
iframe
지도
구글 지도 > 공유 > 지도 퍼가기 > html 복사
YouTube
공유 > 퍼가기 로 iframe을 받을 수 있음
그 외 여러 요소들을 iframe으로 넣을 수 있다.
실습
실습으로 레시피 페이지를 직접 만들어 보았다
- 참고로 쇼츠는 퍼가기 기능이 없기 때문에 가져올 수가 없다
사용자 입력을 위한 태그
form
GET
주소 뒤에 파라미터를 붙여서 데이터를 전달
- 주로 검색 할 때 사용
POST
사용자가 입력한 데이터를 HTTP Request 헤더에 포함 시켜 전송하는 방식
- 로그인 등 사용
input
위와 같이 다양한 사용자 입력 요소들이 있다
로그인
form으로 묶어줘야 서버로 보낼 수 있다
method 지정하지 않으면 GET이 디폴트
Reset 버튼을 누르면 작성한 아이디와 비밀 번호가 초기화 된다.
get method로 로그인을 하게 되면 아이디와 비밀번호가 노출이 된다
post의 경우 정보가 보이지 않음을 알 수 있다
label을 사용하여 박스 내부 뿐이 아니라 아이디 라는 글자를 클릭하여도 아이디를 입력하게 할 수 있다
name: 서버에서 사용하는 이름(서버에서 받는 변수)
id: 브라우저에서 웹 요소를 구분하기 위한 속성
그 외에도 여러 기능들을 추가할 수 있다
오늘의 간단한 후기
HTML을 체계적으로 배워본것이 처음이라 흥미로웠다. 생각보다 많은 기능을 담고 있다는 사실을 알게 되었다. 웹페이지를 구현하는 데에 있어서 보다 도움이 될 것 같다.
출처
[1] Google Maps, "서울특별시청," *Google*, https://www.google.com/maps/place/%EC%84%9C%EC%9A%B8%ED%8A%B9%EB%B3%84%EC%8B%9C%EC%B2%AD/data=!3m1!4b1!4m6!3m5!1s0x357ca2f332cb082b:0xe92b70ac420cf0a8!8m2!3d37.5665851!4d126.9782038!16s%2Fm%2F03ylsqy?entry=ttu&g_ep=EgoyMDI1MDIyNC4wIKXMDSoASAFQAw%3D%3D (accessed Feb. 27, 2025).
[2] YouTube, "[ENG SUB] [동행꿀팁🍯] "위기가 기회로" 딥시크 쇼크 대비 서울시 'AI 교육' 꿀팁? #서울시 #서울 #SEOUL #청년취업사관학교," *YouTube*, https://www.youtube.com/watch?v=OxvKu0qjLPM&t=1s (accessed Feb. 27, 2025).
[3] YouTube, "[빠른계란찜]보드라운 계란찜 만들기🥚🍳계란과 물의 이 비율만 기억하세요😁ㅣ빠르게 만드는 방법까지!/simple steamed eggs recipe," *YouTube*, https://www.youtube.com/watch?v=GA8b9THa3E8 (accessed Feb. 27, 2025).
-If any problem for references, or any questions please contact me by comments.
-This content is only for recording my studies and personal profiles
일부 출처는 사진 내에 표기되어 있습니다
본문의 내용은 학습과 개인 profile 이외의 다른 목적이 없습니다
출처 관련 문제 있을 시 말씀 부탁드립니다
상업적인 용도로 사용하는 것을 금합니다
본문의 내용을 Elixirr 강의자료 내용(김자영 강사님)을 기반으로 제작되었습니다
깃허브 소스코드의 내용을 담고 있습니다
Microsoft에서 제공하는 자료와 정보를 담고 있습니다
본문의 내용은 MS AI School 6기의 강의 자료 및 수업 내용을 담고 있습니다
