1. 1주차 학습 내용 요약:
- CSS은 html을 꾸며주는 역할
- css를 html에 적용시키는 방법은 총3가지 존재
ㄴ 배운건 css파일을 따로 만들고 html 파일의 head 부분에
link rel ="stylesheet" href ="style.css"을 작성해 파일끼리 연동시키기 - css파일내에서 html 디자인을 적용시키려면 상위태그를 지정하고 적용하면 됨 예를 들어 "가나다라"라는 li가 있고, body태그안에 존재하고 이 글자에 색상을 적용시키려고 한다면.
- css의UI(?)인 레이아웃을 자유롭게 배치하기 위해
**display: flex;** 라는 것을 거의 필수적으로 사용 - flexbox froggy 여러 css문법 배움및 활용
body
{
color: (색상);
}
이런식으로 하면 된다
justify-content:flex-start: 요소들을 왼쪽 정렬
justify-content:flex-end: 오른쪽 정렬
justify-content:center: 가운데 정렬
justify-content:space-between: 요소들 사이에 동일한 간격 생성
space-around: 요소들 주위에 동일한 간격을 줌
(배울땐 이렇게 써져 있었는데 비트윈 하고 큰 차이를 아직은 모르겠음,
추측하건데 between은 박스내부 요소들 개수만큼 나눠서 동일한 간격 생성하는것 같고,
space-around는 박스내부 요소들 개수만큼 나눈뒤 거대한 네모박스를 생성해 요소 하나하나를 그 안에 집어넣는 느낌?)
align-items: flex-start: 요소들을 꼭대기로 정렬
align-items:flex-end: 요소들을 바닥으로 정렬
align-items:center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
ㄴ 전체적으로 세로를 건드리는 느낌
flex-direction: column: 요소들을 위에서 아래로 정렬
flex-direction: column-reverse: 요소들을 아래에서 위로 정렬
ㄴ 이 외에 다른 것들도 있는데 아직 안 사용해봐서 정리까진 안 함
과제 시작
1.문제(요구사항) 분석
2.html 선제작
3.css로 디자인 시작
4.완성된 디자인을 보고 오류 개선(글자겹침,가독성 등)
- 추가 도전 과제: 미니카드에 마우스 올릴시 카드가 6px만큼 상승하게 만들기
아마 나누자면 이런 과정일 것이다
1.문제(요구사항) 분석
(저작권 문제 있을까봐 멋사대학의 예시는 못 올림)
일단 분석한 디자인에 따르자면
1. 미니 자기소개카드(프로필 사진, 이름, 분야, 자기소개 요약 글)
2. 메인 자기소개카드(미니 칸에있던 내용들,자기소개,연락처관심기수르 한마디)
이렇게 2가지 구역으로 나눠져있고 여러가지 정보를 단순히 쓰면 된다
또한 배경색이 뭔가 연하고, 구역을 나누는 박스에 외곽선이 있고 끝이 둥그랬다
(벨로그에 올리려고 다 만든 후 기껏 쓴 정보같은거
검열하는게 더 고생이었던건 비밀이다)
2. HTML파일 제작
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자기소개 페이지</title>
<link rel ="stylesheet" href ="자기소개_페이지_디자인.css" >
</head>우선 기본적인 베이스를 짠다
파일 형식(DOCTYPE)을 html-5 (최신)형식으로 인지시키게 만들고
웹페이지 언어 형식은 UTF-8로
웹페이지 제목도 쓰고
마지막으로 css파일과 연동시켜준다.
rel ="stylesheet" 속성이 아직 뭐하는지는 완벽히 모르지만
들은 바와, 안넣을 때 html파일이 css파일 디자인을
적용 안 하는 현상에 보건데
html이 이 파일은 스타일시트다! 라고 인지 시켜줘서 스스로 적용하게 하는 태그 인것으로 보인다
- 이거만들다가 vs코드의 새로운 기능을 알게되었는데
컨트롤+i키를 누르면 ai가 기초를 짜게 만들수 있었다
<body>
<h1>멋사 1주차 과제 자기소개 페이지</h1>
<div1>
<img >
<mini_name><h2>이름칸</h2></mini_name>
<ol>
<mini_track><li>분야: Front-end</li></mini_track>
<li>자기소개 요약글</li>
</ol>
</div1>
<div2>
<p>
<li><h1>이름칸</h1></li>
<main_track><li>분야: Front-end</li></main_track>
<li>동아리: </li>
</p>
<p>
<li><h2>자기 소개</h2></li>
</p>
<p>
<li><h2>연락처</h2></li>
<ul>
</ul>
</p>
<p>
<li><h2>관심 기술</h2></li>
<ul>
</ul>
</p>
<p>
<li><h2>한 마디</h2></li>
</p>
</div2>
</body>
</html>- 요약 하자면 앞서 말했듯 크게 두 박스로 나눠져있기에 div1,2로 구별해주고
메인 항목들엔 h2 크기를 적용시켜 일반 텍스트와 구별되게 하였다.
2-1. 이미지 삽입
자, 우선 바탕하면 "WEB"이라는 폴더 내부에 "image"라는 파일을 만들고
그 폴더 내부에 프로필 사진을 넣는다.
굳이 경로를 강조한 이유는 image파일의 상대 경로를 이용할 것이기 때문이다. 파일의 깊이(?)에 따라
예시로
./이미지명.png
./../이미지명.png
./../../이미지명.png
.
.
이런 식으로 .. 개수를 늘려줘야 한다.
지금은 큰 폴더 내부의
이미지라는 폴더에서 정보를 가져오는 것이니 ./../ 을 쓰면 된다.
이미지 파일 명은 kiwi.webp이다.
프로필 사진이랄만한게 없어서 키위새 사진을 퍼왔다
여튼 이걸
<img src ="./../image/kiwi.webp" width="250px" height="250px" >이렇게 써서 알맞은 자리에 적절한 크기로 조절해서 만들어주면..
이리 귀여운 키위새가 나온다!
(글씨 색, 외곽선과 배경색은 밑에서 설명)
2-2. 메인 자기소개 카드
- 딱히 특별할 것 없이 똑같이 글씨를 써주고 하면된다
아. 다만 편의성으로 이메일을 클릭하면 이메일 웹페이지로 이동하게 링크를 넣어주는 작업을 하였다.
<li>Email: <a href ="https://mail.google.com" target="_blank" title="이메일 페이지로 이동">이메일</a></li>요로코롬, 링크를 웹링크를 연결하고 새페이지로 열게끔 했다. 추가로 텍스트 설명도 붙이고
href를 src로 헷갈려 써놓고 왜 안되냐며 궁시렁거리며 고치는 찐빠가 중간에 있었긴 했다
3.CSS
우선 link에 썼던 것처럼 자기소개패이지디자인.css 파일을 만든다.
그리고 아까 미리 만든 div1, div2를 C언어의 클래스처럼(제미나이 피셜 공식명칭은 스타일 규칙이라 한다) 나눠준다
아래는 최종 결과물.
div1
{
display: flex;
flex-direction: column;
width: 50%;
height: 35%;
border-radius: 10px;
border: 3px solid gray;
}
div1:hover{
transform: scale(1.1) translateY(-6px);
}
mini_name
{
display: flex;
justify-content: start;
}
/* 900 픽셀 정도로 */
div2{
display: flex;
flex-direction: column;
width: 100%;
height: 70%;
border-radius: 10px;
border: 3px solid gray;
}3-1. 박스 생성
위의 있는 코드박스에 적힌 것처럼 네모난 박스를 시각적으로 만들고 모서리를 둥글게 그러니까 즉 곡률을 주기 위해 border-radius: 10px; 를 적용시켰다
이는 수업에서 안 배웠기에 이제 처음으로 이번 과제를 하면서 인터넷 검색을 쓴 부분이기도 하다.
border: 3px solid gray; 는 3픽셀만큼의 회색 외곽선
(테스트해보니 solid도 작성해야 한다)
border-radius: 10px; 는 10만큼의 모서리 곡률
width: 50%;
height: 35%;
는 박스가 차지하는 웹페이지 상의 크기,
픽셀로 하면 웹페이지 축소 때
글자 줄바꿈이 난리나는 등의 문제가 있어 비율로 해주었다.div2도 동일하게 해준다
px사이즈 맞추느라 고생해놓고 마지막에 그냥 비율로 사이즈를 맞춘 슬픈전설
3-2. 배경색,폰트
이제 페이지 배경색을 맞출 차례이다.
그동안 솔직히 배경색이 너무 하얘서 오래 보면 눈이 쨍해지는 느낌 때문에 불편했다.
참고로 이것또한 자습으로 알게 되었다.
우선 코드는
background-color: rgba(128, 128, 128, 0.264);이렇다. 매우 간단하다.
뒤에는 rgb의 색. 0~256까지 있는 그거 맞다.
그리고 맨 뒤에 0.264는 이번에 색 찾다 보니 처음 알게 되었는데 투명도란다.
여튼 색을 일일히 다 치진 않고 vs스튜디오 코드 에만 있는지 모르겠는데
red같은 임의 색을 치면 옆에 박스가 떠서 색을 드래그로 조정할수 있었다.
그 외에도 뭔가 폰트가 좀 구린거 같아서
body
{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: rgba(128, 128, 128, 0.264);
font-size: 24px;
}이렇게 루산다 산스? 체로 바꿔주고
사이즈는 24픽셀로 하였다.
폰트또한 일일히 안치고 font-familly까지 입력하면 폰트 고르는 창이 뜬다.
그리고, 써보진 않았지만 외부에서 다운받고 파일을 연결해서
기본적으론 없는 폰트도 적용시킬수 있는 듯 보인다.
3-3. 욕심
아까전에 한 마디라는 항목에
목표는 풀스택 개발자 라고 적었다. 다만 심심한 느낌이 좀 들었는데
순간 머릿속을 지나쳐가는 광경이 하나 있어서 적용 시키기로 했다.
음..설명하자면 인터넷 게시글에 가끔 보이는 글자가 무지개색으로 되어있고
폰트 사이즈는 들쭉날쭉인 그런 문장.
솔직히 말하자면 현 상태론 단순 반목 작업이다.
제미나이 한테 외주 작업 맡기다가 알게 된것인데 자바스크립트 배우면 뭐 반복문으로
처리할 수 있다고는 한 것 같다.
요구사항은 아래와 같다. 폰트는 18부터 2씩 증가, 각글자의 색은 아래와 같이.
<!-- 빨 노 파 초 분 주 연 파 분 삘긴 !(폰트 2씩 증가)--><li><h2>한 마디</h2></li>
<li><strong>
<dest_1>목</dest_1>
<dest_2>표</dest_2>
<dest_3>는 </dest_3>
<dest_4>풀</dest_4>
<dest_5>스</dest_5>
<dest_6>택 </dest_6>
<dest_7>개</dest_7>
<dest_8>발</dest_8>
<dest_9>자</dest_9>
<dest_10>!</dest_10></strong></li>우선 html 한글자 한글자를 이리 나눠 준다.
그리고 제미나이한테 하청을 맡기기 위해
dest_1{
color: red;
font-size: 16px;
}이와 같이 기본판을 만들고 조건을 제시하면
10초안에
/* 반복 작업이라 제미나이 사용 */
dest_1{
color: red;
font-size: 16px;
}
/* 2. 표 (노랑) */
dest_2 { color: yellow; font-size: 18px; }
/* 3. 는 (파랑) */
dest_3 { color: blue; font-size: 20px; }
/* 4. 풀 (초록) */
dest_4 { color: green; font-size: 22px; }
/* 5. 스 (분홍/보라) */
dest_5 { color: pink; font-size: 24px; }
/* 6. 택 (주황) */
dest_6 { color: orange; font-size: 26px; }
/* 7. 개 (연두) */
dest_7 { color: lightgreen; font-size: 28px; }
/* 8. 발 (진파랑) */
dest_8 { color: darkblue; font-size: 30px; }
/* 9. 자 (분홍) */
dest_9 { color: hotpink; font-size: 32px; }
/* 10. ! (빨강) */
dest_10 { color: red; font-size: 34px; }이리 써준다.
결과물은....
맘에 든다.
4. 박스 상승
이제 마지막으로 아까 추가 도전 과제 였던 6px 상승을 만들 차례이다.
처음에 기능만 따지고 보면 자바스크립트 인것 같아서 이게 추가 도전 과제라고? 라면서 당황 하긴 했다.
일단 검색한다.
그리고 결과물을 1페이지 만에 찾는다.
_솔직히 요즘에 구글에 사용자 입력에 따라 제일 상단에 ai답변이 나와서 검색 시간이 대폭 감소하긴 했다.
그래서 이걸 찾았다고 해야하는지 ai한테 물어봤다 해야하는지
헷갈리기도 한다.
가끔은 제대로 안나와서 좀 더 찾기도 하지만._
여튼 코드는
div1:hover{
transform: scale(1.1) translateY(-6px);
}이렇다.
트랜스 폼을 써주고 translateY(-6px)가 6픽셀 상승 기능을 한다.
스케일은 답변에 같이 나와서 이게 뭐지 하고 봤더니 말 그대로 1.1배로
사이즈를 확장하는 기능이다.
그리고 어려웠던 점이 몇가지 있었는데
첫 번째론, y축이 위에 쓰인것처럼 상승인데 마이너스로 쓰인 점이다.
이게 보니까 웹페이지 에선 통상적인(?) y축 방향이 반대 인것
같았다.
두 번째가 까다로웠는데 :hover 이거다.
이걸 안써주면 박스가 웹페이지 열자마자 상승하면서 커진다.
그러니까 말하자면 일종의 마우스를 감지하는 트리거 역할이다.
솔직히, 이건 버그났을 때 작동도 잘되는데 그냥 바로 상승하고,커져서
"뭐지 이거 원인이 뭐지." 이러면서 원인도 모르다가
제미나이와의 대화로 알게 된 코드이다.
어려웠던 점
웬만하면 오타 같은 셀프트롤이어서 금방 찾고 고쳤지만,
폰트 사이즈 맞추고, 배경색 고르는게 제일 고난이었던 것 같다.
둘다 뭐랄까.. 디자인적 경험치에 기반한 직감 같은
것이기 때문에 시간이 지나면서
해결 될 문제임과 동시에 지금은 어쩔수 없는 문제로 보인다.
새로 배우게 된 점 요약
font-family: > 폰트 지정,바디에 속해야 함
background-color: > 배경색 지정, 바디에 속해야 함
:hover > 마우스 감지 트리거
transform: scale, translateY > 각각 스케일 변경 및 y축 위치 변경(상승은 -부호!)
font-size: > 폰트 사이즈 지정
border-radius: (곡률,px 단위); > 박스 모서리의 곡률 지정
border: (외곽 두께) solid (색상); > 웹페이지 상에서 시각적으로 보이는 박스 생성대체적으로 body 태그(웹페이지 전체 대상) 내부를 건드리는 css코드나
박스를 생성하는 기능을 배웠다고 할수 있는 것 같다.
