브라우저의 역할
1. naver.com이라고 입력한다
2. naver.com에 대응되어있는 컴퓨터에게 "똑똑 나 가져갈거 있는데 그것 좀 줘!"
3. 나한테 그대로 보여준다.
요청하는 쪽 -> 클라이언트
주는 쪽 -> 서버
브라우저의 3대 요소
HTML -> 뼈대
CSS -> 꾸미기
JS(자바스크립트) -> 움직이기
HTML
1. Head - 화면에 안나오는 모든 부분(페이지 타이틀, 파비콘, 이 페이지를 검색엔진이 어떻게 가져갈지, CSS, JS)
2. Body - 화면에 나오는 큰 스크린 내용들 (뼈대 tag) (tag란? <, > 붙은 것들)
Javascript 언어
변수, 자료형, 함수, 조건문, 반복문
Fetch - 인터넷을 통해 데이터를 요청하고 받아오는 과정
[코드스니펫] HTML tag기초
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>스파르타코딩클럽 | HTML 기초</title> </head> <body> <!-- 구역을 나누는 태그들 --> <div>나는 구역을 나누죠</div> <p>나는 문단이에요</p> <ul> <li> bullet point!1 </li> <li> bullet point!2 </li> </ul> <!-- 구역 내 콘텐츠 태그들 --> <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1> <h2>h2는 소제목입니다.</h2> <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3> <hr> span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요 <hr> a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a> <hr> img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> <hr> input 태그입니다: <input type="text" /> <hr> button 태그입니다: <button> 버튼입니다</button> <hr> textarea 태그입니다: <textarea>나는 무엇일까요?</textarea> </body> </html> |
Div -> 구역(감싸는것)
누군가가 만들어 둔 라이브러리 -> 부트스트렙 사이트
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
1주차에서 만든 페이지
'UIUX 3기 본캠프' 카테고리의 다른 글
| 최종 프로젝트 KPT (0) | 2024.06.17 |
|---|---|
| UX 기획 및 리서치 강의 5주차 숙제 및 내용 정리 (0) | 2024.04.05 |
| UX 기획 및 리서치 강의 4주차 숙제 및 내용 정리 (1) | 2024.04.04 |
| 데이터 기반+UX 디자인 = 무적이 될 수도 (0) | 2024.04.04 |
| UX 기획 및 리서치 강의 3주차 숙제 및 내용 정리 (0) | 2024.04.03 |
