[UMC 블로그 챌린지] 0주차

Об этом предложении

안녕하세요 우나입니다! 제가 이번에 UMC 11기로 활동하게 되었어요 야르릉! 혼자서 자료 보고 공부한느 것보다 이르케 직접 정리해야 머리에 들어올 거 같아서 기술 블로그를 함 시작해봅니다 헤헤 우선 이번 글은 프론트 학습에 필요한 공통 언어와 도구를 준비할 겁니더 웹과 브라우저의 기본 구조 웹 페이지는 브라우저가 HTML, CSS, JavaScript 파일을 읽어 화면으로 만든 결과입니다! HTML 은 페이지에 어떤 내용이 있꼬 그 내용이 어떤 역할을 하는지 나타내고 CSS 는 색, 크기, 간격, 배치처럼 모양을 정하구 JavaScript 는 클릭하거나 값 입력했을 때 화면이 바뀌도록 동작을 정해요 HTML로 구조 잡고 CSS로 꾸미고 JavaScript로 동작 만들기! 라고 생각하면 됨미더 그러며넝 브라우저가 웹 페이지를 어트케 보여주는 걸까? 일단 페이지에 접속하면 브라우저가 서버에 파일을 요청해요! 그 파일을 브라우저가 해석한 뒤에 화면을 표시하는 거랍니다 브라우저에서 주소 입력 -> 서버에 파일 요청 -> 파일 응답 받음 -> 브라우저가 파일 해석 -> 화면 표시 이 순서로 이해하면 끝! 실습 환경 준비 이제 실습 환경을 준비할 거애요 저희가 필요한 건 코드 에디터 입니다! 코드 에디터는 코드를 입력하고 파일로 저장하는 프로그램으로 저는 가장 대표적인 VS Code를 사용하게씁니다 설치 알잘딱 해주시면 되고 HTML 만들 때 좋은 VS Code 확장 프로그램도 같이 설치하면 됩니다! Live Server은 HTML 파일을 브라우저에서 열어주고 파일 저장하면 자동으로 새로고침해주는 친구애요 저는 이미 있어서 패스 하구 파일 만들게요 ᄒᄒ 저능 UMC 파일을 c:\umc11th 요기에 다 저장할 거예요 안에 week 폴더를 계속 만들어서 차곡차곡 쌓을 예정! week0 폴더를 만들고 그 안에 index.html 파일을 만들었숩니다 파일 위치: umc11th\week0\index.html HTML 기초 만들어진 index.html 에는 아무것도 없을 텐데 ! + enter을 하면 기본 뼈대 생성됩니당 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> 이렇게 만들어지는데 수정하면서 각각 의미를 알아봅시다! <!DOCTYPE html> // html 문서임을 브라우저에게 알려줌 <html lang="ko"> // 주 언어로 한국어 지정 <head> // 화면에 보이지 않는 문서 정보 저장 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>week0 실습 페이지</title> // 제목 </head> <body> // 실제 화면에 표시할 콘텐츠 저장 <h1>안녕하세요!</h1> <p>웹 개발 스타또</p> </body> </html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 요 코드는 모바일 화면에서도 페이지 너비를 올바르게 해석하도록 합니다! viewport 는 웹페이지에서 사용자 눈에 보이는 화면 영역이고 content="width=device-width" 는 " " 안에 있는 구체적인 설정값을 적용합니다 "width=device-width, initial-scale=1.0" 이니 너비는 디바이스 너비에 맞추고, 처음 화면의 확대/축소 비율을 1배로 설정한 거예요 자주 쓰는 태그 HTML 문서에서 자주 쓰는 태그에 대해 알아볼게요 1학년 전공 때 배우긴 했지만 헷갈려서 여기에 기술하고 가려고 합니덩 <h1>페이지의 가장 중요한 제목</h1> <h2>부제목</h2> <p>문단</p> <a href="링크">하이퍼링크</a> <img src="이미지 링크" alt="이미지 볼 수 없을 때 대체 설명" /> <ul> // 순서 없는 목록 Unordered List <li>list item</li> <li>목록의 각 항목</li> </ul> <ol> // 순서 있는 목록 Ordered List <li>list item</li> <li>목록의 각 항목</li> </ol> <button type="button">동작을 실행하는 버튼</button> 시맨틱 태그 시맨틱 태그는 태그 이름만으로 콘텐츠의 의미와 역할을 설명해요! 모든 영역을 <div> 로 만드는 것보다 <header> , <nav> , <main> 처럼 역할에 맞는 태그를 사용하면 딱 봤을 때 페이지 구조를 이해하기 쉽답니더 특히 접근성, 가독성, 유지보수, 도구의 구조 이해, 일관된 협업 같은 이유로 시맨틱 태그를 잘 활용하는 게 좋습니다! <header> // 페이지나 구역의 머리말 <nav>주요 탐색 링크</nav> </header> <main> // 페이지의 핵심 콘텐츠 <section> // 하나의 주제로 묶인 구역 <h2>제목</h2> <article>독립적으로 읽거나 배포할 수 있는 콘텐츠</article> </section> <aside>본문과 관련 있찌만 분리해도 이해할 수 있는 보조 콘텐츠</aside> </main> <footer>페이지나 구역의 마무리 정보</footer> 모양보다 역할 기준으로 선택할 것! 일반적인 페이지에서 핵심 콘텐츠는 <main> 하나에 담고, <nav> 는 모든 링크 묶음이 아닌 주요 탐색에 사용합니다! <section> 은 서로 관련된 내용을 하나의 주제로 묶을 때 사용하며 내용을 설명하는 제목을 함께 두는 것이 좋아요! 알맞은 시맨틱 태그가 없거나 스타일과 배치를 위한 묶음일 때는 <div> 를 사용해도 좋아요 먼저 콘텐츠의 역할을 생각하고 맞는 태그가 있으면 시맨틱 태그 사용하기! 입력 요소와 label 사용자에게 값을 입력 받을 때는 입력 요소와 해당 값을 설명하는 label을 함께 사용합니다! <label for="어떤 input을 설명하는지 연결, input의 id">닉네임</label> <input id="요소 구별하는 이름" name="서버로 보낼 데이터 이름" type="text" /> <label for="nickname">닉네임</label> <input id="nickname" name="nickname" type="text" /> CSS 기초 꾸밀 HTML 요소를 고르는 부분과 적용할 스타일을 적는 부분으로 구성됩니다! HTML 문서 안에 작성할 때는 <head> 안에 <style> 태그 추가하면 돼요 CSS는 선택자, 속성, 값의 형태로 작성! 기본 선택자 <h1 id="title">타이틀</h1> <p class="description>설명</p> h1 { // 태그 선택자 font-weight: 700; // 폰트 굵기 } .description { // 클래스 선택자, 같은 클래스 가진 여러 요소 선택 color: #475569; } #title { // 아이디 선택자, 고유한 아이디를 가진 요소 선택 letter-spacing: -0.02em; } 스타일을 재사용할 수 있게 클래스 중심으로 작성하고, 같은 속성을 여러 곳에 덮어쓰지 않도록 관련 규칙을 가까이 두면 좋습니다! 하나의 요소에 여러 CSS 규칙이 적용되면 선택자에 부여되는 우선순위 가중치인 명시도, 작성 순서와 상속 여부에 따라 최종 스타일이 달라지니까 유의하시긔 박스 모델 브라우저의 요소는 사각형 박스로 배치돼요! .card { // 클래스 선택자 width: 300px; padding: 24px; // 콘텐츠와 테두리 사이의 안쪽 여백 border: 1px solid #e2e8f0; // 요소의 테두리 border-radius: 16px; // 테두리 모서리 둥글게 표현 margin: 16px; // 요소 바깥쪽 여백 box-sizing: border-box; // 지정한 너비에 padding, border 포함! } 예상보다 요소가 커졌으면 width 만 보지 말고 padding과 border까지 함께 확인하면 굿! ^^ display와 Flexbox