💎 개요
🍫 들어가기 앞서
개강후에,,, 조금 다양한 활동을 하고 싶어서 '홍익대학교 멋쟁이 사자처럼 10기'에 지원하게 되었다!! 맞춰진 커리큘럼을 진행하고 하반기에는 내 아이디어를 바탕으로 해커톤을 진행할 수 있는 점이 매력적이여서 프론트엔드 파트로 지원을 하게되었다!! 지금까지 리액트 네이티브 또는 플러터로 앱 개발을 진행해왔다보니 웹 개발이 하고 싶어졌었구 방학동안에 '호두 이상형 월드컵'을 개발해보면서 웹으로도 충분히 재미를 느낄 수 있겠다고 생각해서 프론트엔드 파트로 진행하게 되었다!!
따라서 멋쟁이 사자처럼 세션에서 HTML, CSS를 이용한 클론코딩을 해보면서 중요하다고 생각되는 부분이나 정리할 필요가 있다고 느껴져서 차근차근 velog에 게시해 놓고, 후에 참고해보고자 한다!!
앞으로 세션에서 기억해볼만한 내용, 또는 개발에 도움되는 정보들을 활용해서 velog에 꾸준히 게시해보도록 하자!!
🍫 참고 자료
👉 https://www.codelion.net/
👉 그리고 멋사 운영진분들이 만들어주신 자료
💎 서론
🍫 HTML과 CSS
HTML은 뼈대, 웹 사이트의 구성요소와 구조를 결정짓는다. 이를 이용하여 웹의 기초적인 구조를 작성한 후 여기에 CSS, JAVASCRIPT를 이용하여 코드를 작성해내 나간다고 생각하면 된다.
CSS는 이러한 HTML 구조에 옷을 입히는 것으로, 좀 더 보기좋고 이쁘게?? 꾸며주는 작업이다. 따라서 사용자가 느끼기에 이쁜 레이아웃을 구성하는 것도 능력이라고 생각한다!!
여기에 추가로 JAVASCRIPT는 앞서 만들어 놓은 구조와 이러한 구조에 데코레이션을 더했다면 이러한 것을 '기능'으로써 동작할 수 있도록 구현하는 것이다.
웹에서는 이러한 HTML, CSS, JAVASCRIPT를 적절히 사용하면서 작동시켜나가는 것이라 볼 수 있다!!
🍫 웹 서비스의 작동 방식
간단하게 웹 서비스가 어떤식으로 작동하는지 생각해본다면 HTTP라는 프로토콜(통신 약속)을 바탕으로 고객이 요청하면 서버가 응답하는 방식이다!! 다음 사진을 보면서 눈에 익혀두면 좋을 것 같다!!
💎 HTML
🍫 기본 태그들 설명
다양한 태그들이 있지만 그 중에서도 내 머리속에 좀 넣어가야 한다고 생각되는 태그들 위주로 기재해보았다!!
👉 <meta>
<meta charset=“UTF-8”>이러한 코드의 구성을 HTML 코드를 작성하면서 무엇인지 몰라도 곧바로 적고 시작할텐데, 이는 어떤 인코딩 방법을 사용할지 지정하는 역할을 하는 코드이다. 이 코드는 UTF-8이라는 문자 세트를 사용한다는 것을 웹 브라우저에 알려준다는 것으로 기억하면 될 것 같다!
👉 <link>
link는 말그대로 링크를 가져와서 쓴다는 것으로 기억하면 될 것 같다!! 외부 리소스들을 (HTML, CSS, 웹에서 발견한 아이콘 등) 가져올 수 있도록 하
는 태그이다!!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">이 코드가 되게 간단하게 css로 사용할 수 있었는데 boostrap에서도 참고할 만한 example들이 많아서 이 점도 기억해보자!!
<link rel="stylesheet" href="style.css">또한 이런식으로 내가 직접 작성한 css코드를 HTML 파일과 연결해서 그대로 사용할 수 있으니 이 점도 잘 기억하자!!
👉 <style>
css를 html에 적용하기 위해 작성하는 코드이다!!
👉 <article>
독립적으로 구분되거나 재사용 가능한 영역이다. 매거진, 신문기사, 블로그와 같은 내용에 사용한다고 생각하면 된다!!
👉 <section>
한 주제로 묶인 영역이다!! 더 적합한 요소가 없을 때 사용하는 것으로 제목이 포함된 태그이다. 콘텐츠가 독립성이 강하면 article 요소를 사용하는 것이 좋다고 한다!
👉 <div>
나는 사실 div 태그를 가장 많이 사용하였는데 위에 있는 article이나 section 태그들을 이용하여 구조를 구분하는 것에도 이용하는 것이 좋을 것 같다. div는 영역을 나눌 때 쓰는 태그라고 기억하면 좋다!!
👉 폼 태그들
추가적으로 폼 – 회원가입, 새 글 작성 등과 같은 태그들 또한 있다.
<form>, <input>, <textarea>, <select>, <option>, <button>위와 같은 태그들을 활용한다면 텍스트 또는 버튼과 같은 기능들을 function과 함께 이용할 수 있으니 적절히 배치해보도록 하자~~!!
💎 CSS
🍫 기본 형태
먼저 css 파일을 생성하게 되면 그안에 선택자를 만들게 되구, 그 곳에 스타일 속성을 선언해주고 속성 값을 주는 형태이다!! 이를 작성하면 반드시 세미콜론을 붙여주고 다음 스타일 속성을 주도록 하장.
🍫 적용 방법
방법은 다양한데 대표적으로 3가지가 있다.
1. HTML 코드 안에서 내부 스타일로 적용.
2. HTML 코드 안에서 inline style로 적용.
3. 외부 스타일로 적용.
# 1번 적용
<style type="text/css"></style>
# 2번 적용
<div style="width : 100px; color : black"></div>
# 3번 적용
<link rel="stylesheet" type="text/css" href="style.css">위와 같은 방식 중 적절히 사용하면 되나 아무래도 3번 방식을 주로 사용하는 것이 좋다구 생각된다!!
🍫 우선 순위
- !important
- Inline 스타일 (태그의 sytle 속성으로 정의)
- id로 지정된 스타일
- class로 지정된 스타일
- 태그로 지정된 스타일
- 전체 선택자(*)로 지정된 스타일
위와 같은 우선순위가 css에 존재하고 이 떄 우선순위가 같을 때에는 스타일 시트 가장 아래에 있는 것이 우선 적용되는 것을 기억하자!!
🍫 기억할만한 CSS 속성들
👉 박스 레이아웃
가장 많이 레이아웃을 구성할 때에 박스를 구성하는 것이 많이 등장할텐데 이 때 padding, margin, border를 알아두는 것이 중요할 것 같다!! 다음 사진을 보면 이해가 빠르다.
위 사진 처럼 padding은 content로 부터 박스 사이의 내부 간격이고 margin은 박스 바깥과 박스 사이의 간격을 조정하는 것이다.
margin : 0 auto;이거는 내가 기억할려는 건데 컨텐츠를 가운데로 정렬할 때 이 한줄로 되가지구 활용하는 것을 아끼지 말장!!
👉 float
float는 문서 위에 '뜨게'하는 속성으로 요소를 왼쪽 또는 오른쪽에 위치시키는 것이다. 이를 순서대로 left로 적용하게 된다면 적용된 요소들이 순서대로 왼쪽부터 배치될 것이다. 이를 마구잡이로 사용하다보면 원하지 않게 뒤죽박죽 또는 사진이 그 주위 공간을 잡아먹으면서 배치가 되버릴 수 있는데, 이를 해결하는 코드는 clear 이다!!
clear는 float 속성을 사용하면 그 박스는 공중에 뜬(부유) 상태이기 때문에 레이아웃이 제대로 작동하지 않을 수 있어서 문서의 흐름을 제거하기 위해 사용되기 때문에 기억해보자!!
👉 flex
flex 속성을 통하여 원하는 레이아웃으로 바꿀 수 있다!!
display : flex;다음과 같이 설정한 후에 컨테이너의 배치를 바꾸어줄 수 있다!
flex-direction 스타일 속성을 통하여 위와 같은 속성들을 적용하여 방향을 적용할 수 있다. 적용하고자 하는 레이아웃이 있다면 잘 적용해보자!!
또한! flex-wrap 스타일 속성도 있는데 다음과 같다!!
이 flex-wrap 스타일 속성을 통해서 적절히 줄바꿈을 하거나 또는 구성을 뒤바꿔줄 수 있는 줄 넘김 처리도 할 수 있다. 이를 이용한다면 레이아웃에서 카드 넘기는 디자인도 적용할 수 있지 않을까??!!! 궁금해지넹
💎 느낀 점 및 정리하기
🍫 정리하면서
웹 코딩을 해보면서 HTML 구조, CSS와 좀더 친숙해질 수 있었다. HTML을 사용할 때 사실 제대로 잘 읽어보지 않고 바로 클론코딩한 적이 많았는데, 이번 세션도 들어보면서 그리고 직접 실습해보면서 기본 구조를 잘 짜보도록 노력하고자 해보니깐 훨씬 코드가 깔끔해지고 이해도 쉬워지는 것 같은 기분이 들었다.
그리구 CSS 또한 자주 사용하다보니 가운데로 정렬 하는 것을 매번 구글링하였는데 손에 익어서 잘 사용해보니 웹 개발을 더 잘하고 싶다는?! 생각도 더 들었다.
🍫 앞으로의 계획
사실 JAVASCRIPT를 이용하여 제대로 웹 개발을 진행해보지 않았다보니깐 좀더 동작하는 웹을 구현해보고 싶다!! 따라서 앞으로 졸업프로젝트에서도 웹으로 구현할 예정이기 때문에 REACT와 함께 웹에 대한 이해를 높일 수 있도록 틈틈히 문서를 찾아보고 열심히 투다닥 해보장!!
화팅!!
