반갑습니다 열분.
글을 작성하다보니 너무나도 길어져.. 2탄으로 돌아온 림졍입니다. 🙋🏻♀️
원래같으면 '아 내가 보기만 편하면 되는거 아니야?' 라며 대충대충 끄적거렸을테지만..
막상 다 까먹은 상태에서 봤을때의 저를 생각하면
'과거의 나 왜이렇게 불친절하게 만들었어..🤦🏻♂️' 라는 후회를 할것 같기에.. 🤷🏻♂️
이어서 CSS 부분을 작성해보도록 하겠습니다.
(생각보다 별거 없어요, 단지 들어가는 코드 때문에.. 글이 길어져서 문제죠)
맛보기 - CSS 작성에 앞서..
강의 정리 글에서 보다시피, CSS 정리는 정말 배웠던 내용만 작성을 했었는데..
이유인 즉슨.. 저는 이미 CSS를 알고 있습니다. (두둥.)
과거 인턴시절, 웹페이지 디자인을 위해 맨땅에 헤딩을 하며 독학(?)을 했기 때문이죠.
(매번 뒤에 강제 명령어인 !important 만 냅다 갈기던 시절..)
솔직히 말해서, CSS는 F12 (맥북인 저는 검사기능..)를 활용하여
위치를 파악하고 잘 집어넣기만 하면 되는 거라.. 모두들 할 수 있습니다.
(바보같은 저도 성공했으니 말이죠 하하)
여튼 그래도 잘 모르실 분들을 위해, 설명과 함께 시작해보도록 하겠습니다. 가시죠.
CSS 1단계 - CSS 간단정리
간단하게 CSS를 설명하면, 뼈대인 Html 요소들을 꾸며주는 명령어다.
간단하게 무X사 스타일의 룩북 같은 느낌으로 생각하면 이해가 빠를 것이다.
옷이나 가방, 물건 등으로 나만의 스타일을 보여줄 수 있는 것이 바로 CSS라고..
(요소는 크게보면 사람이 될 수도 있고.. 아니면 가장 기본이 되는 형태에서 시작될 수도 있을 것이다.)
여기서 CSS의 중요한 특징은 지칭할 수 있는 명령의 대상이 필요하다는 점이다.
예를 들어 티셔츠의 경우, 대부분 가장 기본적인 무지 티셔츠에 다양한 그림이나 무늬를 넣어 제작되지 않는가.
이처럼 가장 기본적인 베이스 (html 요소)가 없다면, CSS를 넣어도 적용이 되지 않는다는 점, 참고하자.
CSS 2단계 - 명령어 파악 및 정리
Day 3에 있는 코드스니펫을 적용하여 결과물과 비교했을 때, 차이점을 알아보자.
차이점
- 뒤는 회색 배경
- 큰 하얀색 박스는 모서리가 둥글고 약-간의 그림자가 있음
- 상자랑 글씨들이 중앙을 향함
- 상자는 홈페이지 중앙에 위치
이를 통해 필요한 디자인 요소들을 한글로 먼저 작성하면 다음과 같다.
- 회색 배경
- 둥글고 그림자가 진 흰 상자
- 내부 글씨들은 중앙에 위치
이를 머릿속에 떠올리며, 이제 필요한 명령어에 대해 알아보도록 하자.
1. 색상변경
색상변경의 경우, color 라는 명령어를 사용하면 된다.
color 명령어 뒤에는 반드시 색상값을 넣어줘야 한다.
이때 원하는 색상을 영어로 사용하거나, 색상코드를 입력하면 된다.
기본 형태
* /* 참고로 '*'는 전체 영역을 꾸며줄 때 사용된다. */
{
/* 같은 표현입니다. */
color : white;
color : #ffffff;
}
색상코드란 RGB 컬러를 웹코딩 시 편리하도록 16진수로 나타낸 것으로
대부분 #000000 의 6자리 코드로 이루어져 있다. (저기에 알파벳도 들어간다. 참고하자.)
'그치만 나는 RGB 값밖에 모르는걸요?' 라는 분들을 위해..
친절하게 RGB 값을 색상코드로 변환해주는 링크를 알려주도록 하겠다.
가장 간단한 건 크롬에서 [RGB to HEX] 를 검색하는 것인데,
밑에 알고 있는 색상값을 넣어주면 원하는 색상 코드로 변환해주는 아주 친절한 친구다.
그 외에 포토샵이나 다른 프로그램을 이용해도 되지만..
우리는 아무래도 개발자니까, 가장 많이 사용하는 크롬만 설명하도록 하겠다.
(추가적으로, 그라데이션을 넣는다면 'HTML Color Picker' 페이지도 이용하면 편리하니 참고하자.)
추가적으로, 특정 부분만 바꿔서 설정하고 싶을 경우가 있을 것이다.
이때 대부분은 배경 혹은 텍스트인 경우가 많은데, 간단하게 color 앞에 각 요소를 붙여주면 된다.
(배경은 background-color 를, 텍스트는 text-color 를 사용)
2. 상자 꾸미기
이곳에 해당하는 명령어는 생각보다 많아서..
실습에 사용되는 코드를 한번에 정리하여 보여주도록 하겠다.
/* 꾸미기 CSS 정리 */
.Box /* div가 Id일 경우에는 #Box를 사용하면 된다. */
{
/* 가로 (너비) = width */
width : 300px;
/* 세로 (높이) = height */
height : 500px;
/* 배경색 : background-color */
background-color : #ffffff;
/* 테두리 : border, solid의 경우 실선 테두리를 표현할 때 사용 */
border : 1px solid #ccc;
/* 모서리 둥글게 : border-radius */
border-radius: 10px;
/* 박스 그림자 : box-shadow */
box-shadow : 0 0 10px rgba(0,0,0,0.1);
/* 뒤 rgba에서 rgb = 색상을, a = 투명도를 의미*/
}
위의 내용을 <head> 에 적용하고, <body> 에 "Box" 라는 div를 정해주면 아래의 결과처럼 나온다.
(div는 <div class = "Box"></div> 를 <body> 안에 넣어주면 된다.)
3. 여백 및 정렬 기능
여백의 경우, 바깥 여백을 지정하는 margin 과 내부 여백을 지정하는 padding 이 있다.
지정값이 하나인 경우 모든 방향에 적용되며, 개별 적용도 가능하다.
(단, 위치에 대해 알려줘야 한다는거.. 뒤에 top 이나 bottom 등이 들어가야 한다.)
기본 형태 정리
.Box {
/* 외부 여백 50px씩 */
margin : 50px;
/* 내부 여백 10px 설정 */
padding-bottom : 10px;
}
추가로 margin 은 자동으로 여백설정이 가능한데,
뒤에 auto 를 사용하면 요소가 수평 방향으로 중앙에 배치되는 것을 볼 수 있다.
(그래서 큰 부분의 대부분 중앙정렬은.. margin이 사용된다.)
margin : (설정값) auto;
.Box
{
width : 300px;
height : 500px;
background-color : #ffffff;
border : 1px solid #ccc;
border-radius: 10px;
box-shadow : 0 0 10px rgba(0,0,0,0.1);
/* 가운데로 정렬 : margin & auto 사용 */
margin : 100px auto;
}
정렬의 경우, 대부분 margin 이 사용되지만
텍스트 정렬 등, 특정 기준에 맞추어 정렬할 때는 align 이 사용된다.
단, align은 단독으로 사용되지 않으며, 앞에 무조건 뭐가 붙어야 하니 참고하자.
(다른 기능도 있지만.. 더 넘어가면 어려우니 우리는 텍스트 정렬만 배워보도록 하겠다.)
align 알아보기 - text-align
.Box
{
width : 300px;
height : 500px;
background-color : #ffffff;
border : 1px solid #ccc;
border-radius: 10px;
box-shadow : 0 0 10px rgba(0,0,0,0.1);
margin : 100px auto;
/* 텍스트 중앙정렬 */
/* div 안에 텍스트가 존재하지 않으면 알 수 없으니 참고하자.*/
text-align : center;
}
4. 배치
마지막으로 요소를 배치할 때 사용되는 display 에 대해 알아보자.
display 는 요소가 어디에 어떻게 표시될지 결정한다.
따라서 요소를 정렬할 수도, 요소를 보이지 않게 할 수도 있다.
그 외의 설명은 아래를 참고하도록 하자.
display 형태 알아보기
/* display 기능정리 (자주 사용되는 것만) */
/* block : 전체 너비 차지, 줄바꿈 발생 */
.Box {
display : block;
}
/* inline : 한 줄에 배치 (콘텐츠 너비만큼 차지), 높이와 너비 설정불가. */
.Box {
display : inline;
}
/* inline-block : 한 줄에 배치 but, 높이와 너비 설정가능 */
.Box {
display : inline-block;
}
/* flex : 자유롭게 정렬가능 */
.Box {
display : flex;
}
/* inline-flex : 한 줄에 배치, flex 처럼 자유롭게 정렬가능 */
.Box {
display : inline-flex;
}
/* none : 표시되지 않도록 숨기는 기능 */
.Box {
display : none;
}
CSS 3단계 - 직접 꾸며보기 (코드스니펫 포함)
자, 이제 대망의 꾸며보는 시간이다.
지금까지 배웠던 용어를 활용하여 코드를 작성해보도록 하자.
코드는 생각보다 길어서.. CSS 부분만 작성해보도록 하겠다.
(최종 코드를 알고싶다면, 맨 아래에 첨부할테니 참고하길 바란다.)
CSS 코드스니펫 (복사하여 <head> 에 적용시키면 된다.)
<style>
/* 전체 배경, 연한 회색으로 변경 */
body {
background-color: #e2e2e2;
}
/* 박스 디자인 */
.container {
width: 300px;
text-align: center;
margin: 300px auto 0px auto;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
/* 모든 요소의 기본 여백 제거 */
* {
margin: 0;
padding: 0;
}
/* h1 = 제목 디자인 */
.container>h1 {
padding-top: 20px;
padding-bottom: 20px;
}
/* 제출 폼 디자인 */
.number-display,
#submit {
margin-top: 20px;
display: block;
}
/* 여백 설정 */
.form {
padding: 20px;
}
/* 입력 필드 및 버튼 디자인 */
#user-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
/* 버튼 디자인 */
.start-btn,
.submit-btn {
padding: 10px;
border: none;
border-radius: 10px;
}
/* 내부 텍스트의 상호작용 제거 및 배경색 설정 */
.div {
display: block;
unicode-bidi: isolate; /* 이 친구는 참고만 하자. */
background-color: white;
}
</style>
마무리 (위치를 모르겠을 때 해결법)
드디어 실습 하나가 끝났다.
(여기까지 읽어주신 여러분.. 정말 고생 많으셨습니다..🥹)
기초적인 내용만 배우고 막상 실행하려니 맨땅에 헤딩을 열심히 했지만(?)
그래도 어케저케 해결해서 이렇게 작성한다는 것에 의미를 두겠다.
아 그리고, 어느 위치에 CSS를 넣어야할지 모르는 분들을 위해.. 한가지 팁을 드리자면
F12 를, (맥은 마우스 우클릭 - [검사]) 를 눌러 개발자 도구를 연 다음
Ctrl + Shift + C (맥은 Command + Shift + C)를 누르면 마우스 커서가 있는 곳에 대한 요소의 정보가 나온다.
이를 활용한다면 어느 위치에 CSS를 넣어야 적용되는지 알 수 있다.
물론, 이곳에서 수정하며 (새로고침만 하지 않는다면..) 실시간으로 결과를 볼 수 있으니
추후 다른 디자인을 건드릴때 참고하면 유용할 것이다.
어쩌다보니 일요일에 쓰던게 월요일 새벽에 완성되었지만, (너무 널널하게 작성한 자의 최후.)
큰 산 하나를 넘겼으니, 다음부터는 잘 할 수 있지 않을까..? 🙄
이쯤에서 마무리하고, 슬슬 자러가야겠다.
내일 봅시다 여러분, 굿바이.
코드스니펫 (그냥 기본 형태부터 가져왔으니 복사해서 빈 공간 안에 넣어주면 된다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자 기억 게임</title>
<style>
body {
background-color: #e2e2e2;
}
.container {
width: 300px;
text-align: center;
margin: 300px auto 0px auto;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}
* {
margin: 0;
padding: 0;
}
.container>h1 {
padding-top: 20px;
padding-bottom: 20px;
}
.number-display,
#submit {
margin-top: 20px;
display: block;
}
.form {
padding: 20px;
}
#user-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
.start-btn,
.submit-btn {
padding: 10px;
border: none;
border-radius: 10px;
}
.div {
display: block;
unicode-bidi: isolate;
background-color: white;
}
</style>
</head>
<body>
<div class="container">
<h1> 숫자 기억 게임 </h1>
<div id="number-display"></div>
<form id="submit">
<input id="user-input" placeholder="숫자를 입력하세요" type="text">
<button class="start-btn" type="button" onclick="showRandomNumber()">시작</button>
<button class="submit-btn" type="submit">제출</button>
</form>
<div id="result"></div>
</div>
<script>
let num = 0;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function showRandomNumber() {
num = getRandomInt(1000, 9999);
const numberDisplay = document.getElementById("number-display");
numberDisplay.innerText = num;
setTimeout(() => {
numberDisplay.innerText = '';
}, 3000);
}
function submitAnswer(event) {
event.preventDefault();
const inputNumber = document.getElementById("user-input").value;
const resultDiv = document.getElementById("result");
if (parseInt(inputNumber) === num) {
resultDiv.innerText = `정답입니다!`;
} else {
resultDiv.innerText = `오답입니다. 정답은 ${num}입니다.`;
}
setTimeout(() => {
resultDiv.innerText = '';
}, 3000);
}
document.getElementById("submit").addEventListener("submit", submitAnswer);
</script>
</body>
</html>'React TIL' 카테고리의 다른 글
| [React] Day_6 데일리 정리 (이어서) (0) | 2024.09.05 |
|---|---|
| [React] Day_5 데일리 정리 (3) | 2024.09.03 |
| [React] Day_3 맨땅에 헤딩하는 실습일기 - (1) (2) | 2024.08.31 |
| [React] Day_2 데일리 정리 (4) | 2024.08.29 |
| [React] Day_1 데일리 정리 (6) | 2024.08.28 |
