그린컴퓨터디자인 학원 복습 및 정리
3월 6일 복습
유니크샤인
2025. 3. 6. 21:07
웹 구조 파악하기
Figma의 레이어는 HTML 구조라고 보면 된다.
레이어에 있는 레이어 이름을 클래스네임으로 쓰면 된다.
Figma의 Design 패널은 CSS라고 보면 된다.
- Frame 패널
X,Y: Position, Lock aspect ratio: 비율 잠금, 비율 유지, W: width, H: Height, Fill: 색상 채우기
Hug container : 자식 또는 컨텐츠의 내용에 따라 크기 결정
fill container : 부모 따라감
Auto Layout -> display: flex;
Auto Layout은 9군데 중 한 군데에 배치할 수 있다.
padding: 자신 박스 안의 여백, margin: 나와 옆 박스와의 간격
align-items : 가로 세 줄로 정렬 (위,중간,아래)
justif-content : 세로 세 줄로 정렬 (좌,중간,우)
Auto Layout이 걸려있다는 소리는 Position: relative 와 같고 또한 Frame 패널에서 Absolute Position을 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A-1 유형</title>
<link rel="stylesheet" href="css/style.css" />
<!-- <script src="javascript/script.js"></script> -->
</head>
<body>
<div class="wrap">
<header class="header">
<a href="#" class="logo">JUST 쇼핑몰</a>
<nav class="menu">
<ul class="navi">
<li>
<a href="#">탑</a>
<ul class="submenu">
<li><a href="#">블라우스</a></li>
<li><a href="#">티</a></li>
<li><a href="#">셔츠</a></li>
<li><a href="#">니트</a></li>
</ul>
</li>
<li>
<a href="#">아우터</a>
<ul class="submenu">
<li><a href="#">자켓</a></li>
<li><a href="#">코트</a></li>
<li><a href="#">가디건</a></li>
<li><a href="#">머플러</a></li>
</ul>
</li>
<li>
<a href="#">팬츠</a>
<ul class="submenu">
<li><a href="#">청바지</a></li>
<li><a href="#">짧은바지</a></li>
<li><a href="#">긴바지</a></li>
<li><a href="#">레깅스</a></li>
</ul>
</li>
<li>
<a href="#">악세서리</a>
<ul class="submenu">
<li><a href="#">귀고리</a></li>
<li><a href="#">목걸이</a></li>
<li><a href="#">반지</a></li>
<li><a href="#">팔찌</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main class="main">메인 영역입니다.</main>
<footer class="footer">푸터 영역입니다.</footer>
</div>
</body>
</html>index.html
/* 기본 스타일 초기화 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
.wrap {
width: 1200px;
height: 700px;
background-color: #ddd;
margin: 0 auto;
}
.header {
position: relative;
width: 100%;
height: 100px;
background-color: aqua;
display: flex;
}
.logo {
position: relative;
width: 200px;
height: 100%;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.menu {
position: relative;
width: 1000px;
height: 100%;
background-color: rgb(170, 171, 230);
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 30px;
}
.navi {
position: relative;
display: flex;
}
.navi > li {
position: relative;
}
.navi > li > a {
display: block;
width: 150px;
height: 40px;
font-size: 20px;
text-align: center;
line-height: 40px;
background-color: #dcadad;
}
.submenu {
position: absolute;
top: 40px;
left: 0;
/* display: none; */
}
.submenu li {
}
.submenu li a {
display: block;
width: 150px;
height: 40px;
font-size: 18px;
line-height: 40px;
text-align: center;
background-color: #cddcad;
}
.main {
width: 100%;
height: 500px;
background-color: bisque;
}
.footer {
width: 100%;
height: 100px;
background-color: violet;
}style.css
a 태그에 크기를 지정할 수 없으나, display:block을 설정하면 사용 가능하다.
# 1. 자바스크립트 코드 작성 위치
- js-location.html
- javascript/jsLocation.js
## 1.1 자바스크립트 콘솔
### 1.1.1 console
- console.html
# 2. 데이터 형과 연산자
## 2.1 variable(변수)
- variable.html
### 2.1.1 변수란?
- 데이터가 컴퓨터 메모리에 저장되는 주소
- 변수를 선언하고 할당한다.
### 2.1.2 키워드
- var 이제 잘 안씀
- let
- const 상수
### 2.1.3 변수 네이밍 규칙
- 변수 이름에는 영어, 숫자, 밑줄, $ 사용
- 숫자로 시작하면 안된다.
- 대소문자 구분, 카멜케이스 사용이 일반적
## 2.2 자료형(data type)
- 숫자(number)
- 문자열(string)
- 부울(boolean)
- Null
- Undefined
- 객체(object)
- 그외...Bigint, 심볼(symbol)
### 2.2.1 숫자(number)
- number.html
- 정수(integer)
- 소수점이 있는 부동소수점 숫자(floating point number)
### 2.2.2 문자열(string)
- string.html
- 하나 이상의 문자를 표현하는 데 사용
- 문자열에서는 문자들을 큰 따옴표""나 작은 따옴표''로 감싸야한다.<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>숫자 데이터 number</title>
</head>
<body>
<script>
const a = 3; // 정수(integer)
const b = 5.7; // 부동 소수점 숫자(floating point number)
const c = 123e3; //123000
console.log(c);
const d = 123e-3; // 0.123
console.log(d);
</script>
</body>
</html>
데이터 종류가 숫자만 적혀있으면 숫자(number) 자료형이다.
const c= 123e3; // 0이 3개다.
const d= 123e-3; // 소수점 세 자리만약 큰 따옴표나 작은 따옴표로 감싸있으면 문자열(string) 자료형이다.