🦁멋사12기세션_HTML과 CSS

쩡이·2024년 8월 8일

멋사12기 멋사세션 프론트엔드

최애의 사자🦁

목록 보기

1/2

🧐웹페이지의 기본적인 구성요소

🦁멋쟁이사자처럼 대학교 홈페이지 바로가기 → https://likelion.university/

LikeLion University 메인페이지 구성
- Header : 페이지의 상단 부분
- 기업의 로고
- 메뉴 버튼 → 다른페이지로 이동이 가능하다
- 네비게이션 바(nav bar)라고도 하며, html에서는 <nav>로 시작한다.
Footer : 페이지의 하단 부분
- 브랜드 로고
- 사이트 맵
- 소셜 정보
- 저작권 표기
- 언어 설정

//기본 라이브러리 설정 불러옴
!<tab><tab>

🖍️HTML

❗️base.html 파일을 이용해서 네브바, 푸터 등 페이지별 기본 속성은 저장해두자!

웹페이지의 텍스트 작성
필요한 사진을 삽입한다
- 사진을 ‘가져오기’만 한다.
- 배열을 어떻게 할지는 css에서 결정

❗️css에서 배열을 좀더 편하게 하려면? div태그를 사용해보자!

<div>태그를 이용해서 상자로 구역을 나눠보자 → 실습과정에서 직접 보여주도록 하겠다

HTML 파일의 전체적인 구성

<head>
<title>멋쟁이사자처럼/title>

##다른 파일(특히 css)혹은 다운로드 받은 폰트와 연결
<link rel="stylesheet" href="../css/base.css">
</head>

##웹페이지의 전체적인 내용 작성
<body>
	<nav>
	<div>
			<p>paragraph - 문단을 작성합니다</p>
			<a> 하이퍼링크를 삽입할수 있습니다</a>
</body>

HTML태그

✔️html태그를 모두 외우는것은 불가능합니다. 레퍼런스와 검색을 이용해서 그때그때 적절한 코드를 사용합시다

✔️시간상 세션에서 다루지 못한 기능들도 있으니 각자 디자인에 맞는 태그를 찾아서 사용하시면 됩니다

id는 중복 허용X, class는 중복 허용
<p> 태그와 <a>태그의 차이점
- <a>태그는 <button> 태그에 사용할수가 없습니다
<button>태그 사용법
<img> 태그를 이용해서 사진을 삽입하는 방법

🖍️CSS

→색깔을 입히거나 사진 배열을 좀 더 다양하게 바꿀 수 있다

CSS코드의 기본구성

색깔 지정(var속성) → 저는 #000000을 검정색이 아닌 #3E3E3E를 검정색으로 하겠습니다

:root{

CSS에서의 정렬 방식

이건 개발자마다 선호하는 방식이 다르기때문에 정답은 없지만 원하는 배열을 찾기 위해 많은 시간을 할애할 수도 있습니다.

❗️추천하는 방식 : 페이지를 구상할때 div로 묶은 요소들을 어떻게 배치할지 미리 손으로 그려보자

⭐️display: block;과 display:flex;

display: block;

세로정렬임을 기억하면 쉽다
기본적으로 크기는 display의 가로길이(width)와 동일하다
- width, height 값을 조정할 수 있다
<div> ,<p>, <li> 태그를 예시로 들 수 있다

css출력결과

display: flex;

참고한 게시글입니다.
이번에야말로 CSS Flex를 익혀보자

출처
https://www.heropy.dev/p/B74sNE

다양한 배열 코드에 따라 아이템이 어떻게 정리되는지 살펴볼수 있다.

가로정렬임을 기억하면 쉽다

Untitled

→ 보통 이렇게 flex 속성을 사용해서 컨테이너로 묶고, 각각의 item에 개별로 속성을 적용할수 있다.

감이 잘 안올수 있는데, 일단 이론 먼저 살펴보고 실습& 과제를 하시면서 감을 익히면 됩니다! 어렵지 않아요😊

앞으로 소개할 설정들은 display:flex 설정을 기본으로 합니다

→ block에 적용해봤더니 아무일도 안일어납니다~~(저도 알고싶지는 않았는데)~~

flex-direction

아이템들이 배치되는 축의 방향을 설정합니다
기본설정은 row
저는 column방향으로 정렬할때 자주 사용합니다

Untitled


.navbar {
display:flex;
flex-direction:column; 
}

justify 정렬과 align 정렬

유치할수 있지만 이 사이트에서 너무 잘알려줘서…
오뎅꼬치

justify-content : 메인축방향 정렬

.container{
justify-content:flex-end; /*기본설정, 왼쪽부터 정렬*/
justify-content:center; /*가운데정렬*/
justify-content:space-between; /*일정한 간격을 두고 가운데정렬*/

Untitled

😳참고: space-어쩌구의 배열방식
나중에 좀더 섬세한 디자인과 개발을 위해 필요한 부분입니다!
아이템들의 사이 & 여백 & 양끝 중 어디에 간격을 둘지 결정해주는 속성들입니다
Untitled

다시한번 강조하지만! 이것들을 외울필요는 없고, 조금씩 작업을 하다가 자신이 생각한 배열과 가장 비슷한 속성을 주는 코드를 찾아서 적용해주면 됩니다!

이 세션자료 혹은 구글링해서 찾은 자료를 소스로 사용해주세요 🤗

align-content: 메인축에 수직 방향으로 정렬

.container{
align-items: stretch; /*기본값, 아이템들이 세로 아래까지 쭉늘어남*/
align-items: flex-start; /*stretch와 시작은 같은데 아이템 세로 크기에 맞춰짐*/
align-items: flex-end; /*flex-start의 시작과 반대*/
align-items: center; /*화면상 가운데정렬*/
align-items: baseline; /*텍스트의 베이스라인 기준으로 정렬*/}

stretch

flex-start

center

)
center와 baseline의 차이점!

Untitled
center가 화면(display)의 중심이라면, baseline은 각 텍스트의 중심라인입니다

여백 : padding과 margin

Untitled

border를 경계로 나뉘며 margin은 바깥쪽 여백, padding은 안쪽여백을 의미합니다

❗️<a> 태그는 block이 아니라 inline 요소기때문에 margin값을 가질수 없습니다❗️

개발자도구

나는 코드를 썼는데 뭔가가 안보인다 → 개발자 도구를 활성화시켜서 어느 부분에서 문제가 발생했는지 파악할수 있습니다

Untitled

반응형 웹페이지

flex-wrap

💻실습 - 항공대 멋쟁이사자처럼 LMS페이지 만들어보기

만들고자 하는 화면

Untitled

base.html 만들기
1. 글자 쓰기
  - <a>태그, <p>태그를 이용해서 nav바에 들어갈 내용들 작성
  - ❗️div태그를 이용해서 미리 묶어두면 css 속성을 적용할때 편리하다
2. 버튼 만들기
  - <button>태그를 이용해서 click을 했을때 기능을 부여할수 있는 준비를 해두기
  → click했을때 발생하는 이벤트는 추후 JS 세션에서 자세하게 다룹니다
3. css로 배열&간격&배경색 다루기
  
  ❗️css에서 배열을 좀더 편하게 하려면? 폰트와 글자 굵기는 단어에 직접 적용하고 배치는 div에서 다루자!
  
  배경, 폰트, 버튼 크기를 먼저 적용한 모습입니다.
  
  footer는 디자인이 동일하기때문에 nav바 부분부터 먼저 디자인을 잡고, 복사 붙여넣기 해줍니다
  
  🤯 배열도 불편하고, 우리가 만들어둔 ‘목록’ 텍스트나 ‘HOME’ 텍스트가 보이지 않는다
  
  개발자 도구를 켜봤더니, div가 한줄 전체를 차지하고 있다. → 기본값이 데스크탑의 가로길이(전체)에 맞춰져있음
  
  likelion 제목과 일렬로 정렬하자 → div의 가로 길이를 버튼의 크기와 맞추자 → 여백을 설정하자
```
.homebtn_div{
  width:50px; /*div상자의 가로를 버튼의 가로길이와 맞춘다*/
  display:block;
  flex-direction: column; /*요소들을 세로로 배치한다*/
  margin-top: 10px;
  margin-right:0px;
	/*나머지 여백 부분은 화면과 코드를 대조해가면서 조정한다*/
  margin-left:auto; /*왼쪽 여백은 오른쪽에 버튼을 하나 더 둘거니까 일정하게 맞춘다*/
}
```
  다음JS 세션 미리보기
  
  ⭐️JavaScript는 다음 세션에서 좀더 자세하게 다룹니다
main.html에 footer.html속성(푸터,네브바) 적용하기 <~~link> 태그를 이용해서 base.html 불러오기~~ → 더이상 제공하지 않는 옛날 방식
- 요즘 개발 트렌드는 Vanilla JavaScript 프로그램을 사용하는것입니다 라떼 이야기를 조금 해보자면… 제가 처음 코딩을 배웠을때는 jQuery를 통해 vanilla JavaScript 코드를 대체하면서 비교적 짧은(?)코드로 코딩이 가능했습니다.
```
$(document).ready(function(){
    $(#header).load("/header.html");
    $(#footer).load("/footer.html");
});
```
  document(프로그램)이 준비가되면 아래의 함수를 시행합니다
  - (헤더)부분에는 . 불러온다 “header.html”
  - (푸터)부분에는 .불러온다 “footer.html”
    
    하지만 jQuery는 라이브러리(외부 참고책자)를 불러와서, 코드를 검토할때 우리가 짠 코드 말고도 불러온 코드도 검토해야 하기때문에 시간이 오래 걸려서 순수한(vanilla) 자바스크립트 코드를 쓰게 되었답니다
```
<div nav-include-path="../templates/layout/navbar.html">
			
      <script>LoadNAVBAR();</script> 
    </div>
```
    개발 트렌드는 비교적 단시간에 다양하게 바뀌기 때문에 항상 트렌드를 확인하는것이 중요합니다!
    
    제가 세션을 만들때 참고한 링크를 올려 드릴테니 좀더 궁금한점이 있으시면 여기 칼럼을 읽어보시는것도 좋을것 같습니다
    
    Vanilla JS, 선택일까 필수일까 - 인프런 | 스토리
    
    읽다가 이해가 안가는 내용이 있으면 구글링을 추가로 하셔도 좋고, 운영진에게 편하게 질문해주셔도 됩니다 :)
    
    개인적으로 HTML,CSS는 웹페이지를 만들때 기본틀 정도로만 작용하기 때문에
    
    내가 “프론트엔드개발을 해봤다” 라고 말할수 있으려면 최소한 JavaScript를 사용해봐야 한다고 생각합니다