개발일지
베이스캠프 1~2일차 본문
코드 캠프에 하루늦게 들어와서 다른 사람들보다 좀 늦게 강의를 시작해서 이번주 주말까지 공부를 하면서 진도를 따라잡아야겠다고 계획했고
1일차에 웹에대한 기본적인 지식과 코딩에 필요한 프로그램 vscode를 다운받아 설치하고 싸이월드 미니홈피를 만드는거까지 하였다
HTML
하이퍼텍스트 마크업 언어 (HyperText Markup Language)로,네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 체계입니다.HTML 언어의 본질은, 사용자간에 소통하기 위한 정해진 약속입니다.다시 말해, HTML은 웹페이지에 문서를 작성하는데 정해진 약속이며,태그를 통해 웹페이지에서 보여질 내용을 나타냅니다.
태그
하나의 약속된 명령어로 태그마다 고유의 기능이 있음
시작태그+내용+종료태그로 구성된 한줄을 HTML Element (요소)라고 부릅니다.< > 안에 들어간 문법에 따라 고유의 기능을 가지고 있습니다.
태그의 종류
# https://developer.mozilla.org/en-US/docs/Web/HTML 예시 참조
문자를 꾸며주는 태그
// html // Browser에 그려짐
<strong>Hello World</strong> <!-- **Hello World(두꺼움)** -->
<u>Hello World</u> <!-- Hello World(밑줄) -->
<h1>Hello World</h1> <!-- 큰사이즈의 제목. **h1부터 h6까지 (점점 작아짐)**-->빈태그
<br /> // 다음 줄로 내려가는 태그
<hr /> // 수평선을 그려주는 태그
특정 기능이 있는 태그와 속성 (attribute, value)
특정 태그는 속성과 속성의 값을 주어 더 구체적인 기능을 구현할 수 있습니다.
태그의 attribute(속성)과 해당 속성의 어울리는 value(값)를 주어서 사용합니다.
// 기능이 있는 태그*
<button>버튼</button> <!-- 버튼 생성 -->
<textarea>입력창</textarea> <!-- 여러줄 텍스트 입력창 생성 -->
// 태그의 attribute와 value
<input type="text" /> <!-- 한줄 텍스트 입력창 생성 -->
<input type="password" /> <!-- 비밀번호 입력창 생성 -->
<input type="color" /> <!-- 색상 선택창 생성 -->
<input type="checkbox" /> <!-- 체크박스(여러개선택) 생성 -->
<input type="radio" name="group"/> <!-- 라디오버튼(1개선택) 생성 -->
=> name이 동일한 radio 버튼 중 1개만 선택됨
<label>라벨</label> <!-- 체크박스, 라디오버튼 등에 라벨 생성 -->
<a href="http://google.com">구글로 가기</a> <!-- 현재창에서 이동-->
<a href="http://google.com" target="_blank">구글로 가기</a> <!-- 새창에서 이동 -->이미지와 동영상 태그
html 태그에는 이미지를 보여주는 태그, 동영상을 보여주는 태그가 있습니다.
<!-- 일반이미지 -->
<img src="/이미지경로/이미지.확장자" /><!-- 배경이미지 -->
<div style="background-image: url('/이미지경로/이미지.확장자')" /><!-- 동영상 -->
<video muted="muted" autoplay="autoplay" loop="loop"><source src="동영상위치.mp4"> <!-- muted: 음소거 -->
</video> <!-- autoplay: 자동재생 -->
<!-- loop: 반복재생 -->
HTML의 핵심
html의 모든 태그에는 각각의 사이즈가 존재한다
각각의 사이즈는 block 와 inline 둘중 하나로 표현된다
block - 페이지의 가로로 자리를 차지 넓이 전체를 차지하는
inline - 자신의 크기만큼 자리를 차지
CSS
cascading style sheet의 약자입니다.cascading style sheet 란 무엇일까요?
CSS는 HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어입니다
css 특성
색,크기,정렬이 존재합니다
div {
color: red;
color: rgb(255,0,0); /* RGB */
color: #FF0000; /* HEX 값 */
font-size: 20px; /* 글자크기 */
font-weight: 300; /* 글자두께 */
text-align: center; /* 가운데 정렬 */
font-family: arial; /* 글꼴 */
width: 300px; /* 넓이 */
height: 300px; /* 높이 */
background-color: red; /* 배경색 */
border: 1px solid black; /* 테두리 */
border-radius: 5px; /* 테두리의 모서리 둥글게 */
}css 기본문법
단일 속성 지정
selector(선택자) { property(속성) : value(값) ; }
다중 속성 지정
selector(선택자) {
property(속성) : value(값) ;
property(속성) : value(값) ;
property(속성) : value(값) ;
property(속성) : value(값) ;
property(속성) : value(값) ;
}
css사용방법 3가지
html 태그에 입력하기
html태그에 입력하면 유지 보수 측면에서 굉장히 비효율적 입니다.
style 태그에 입력하기
유지보수 측면에서는 유리할 수 있지만 관심사 분리가 안됩니다.
css파일 분리
실무에서 가장 많이 사용되며, 유지 보수에 유리합니다.파일을 불러올때는 <link> 태그를 사용합니다.
선택자는 CSS에서 꾸밀 대상 즉, 속성을 줄 대상을 뜻합니다.
- * {} : 전체 선택자
- tag : 태그 선택자
- .class(클래스 이름) : 클래스선택자
- #id : 아이디선택자
- 선택자:가상상황 : 가상선택자
<!-- CSS 기본 선택자 -->
<style>
* {
color: red;
}
tag {
color: red;
}
.class {
color: red;
}
#id {
color: red;
}
선택자:가상상황 {
background-color: red;
}
</style>
박스모델
HTML의 각각의 태그들은 모두 박스모델의 형태로 이루어져 있습니다.
다만, 몇몇 태그들은 배경색이 없고, 테두리가 없어서 박스처럼 보이지 않을 뿐입니다.
margin
: border를 기준으로 박스의
바깥 여백
입니다.
border
:
박스의 기준이 되는 바깥 테두리 선
입니다. 선의 두께를 설정할 수 있습니다.
padding
: 박스의
안쪽 여백
입니다.
contents
: 박스의 실질적인
내용 부분
입니다.
박스모덷 화면 표시 방법
CSS 박스모델에는 content-box, border-box 가 있습니다.border-box : border가 고정되고 contents 크기가 변합니다. (박스가 고정)content-box : contents가 고정되고 border의 크기가 변합니다. (박스가 커짐)
실무적용 - { border-box, content-box 각 각 } 언제 사용하나요?실무에서는 박스 크기를 디자이너가 전달해준 화면과 일치시켜야 하기 때문에 바깥테두리(박스전체)를 고정시키는 border-box 사용을 권장합니다.
1일차 스프린트1 회원가입 만들기 스프린트3 회원가입에 css 적용하기까지
부모박스에 display: flex; 속성을 주고 하위에 있는 것들을 배열할때 사용
부모박스 기준으로 정렬됨 이부분을 잘 이해 못해서 코드를 복사해가면서 이해했다
밑에 코드들을 이용해서 좌로 정렬도 가능할거같다
- 가로로 정렬할 때display : flexflex-direction : row (가로로 정렬)justify-content : center; (가로로 중앙 정렬)
- 세로로 정렬할 때display : flexflex-direction : column (세로로 정렬)align-items : center; (세로로 중앙 정렬)
.out_box {
width: 670px;
height: 960px;
display: flex;
flex-direction: column;
align-items: center;
margin: 60px auto;
background: #ffffff;
border: 1px solid #aacdff;
box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25);
border-radius: 20px;
}
.inline_box {
width: 470px;
height: 818px;
margin: 72px 100px 70px 100px;
}
.in_header {
color: #0068ff;
width: 466px;
height: 94px;
}
.em {
width: 466px;
border: 1px solid gray;
border-top: 1px;
border-left: 1px;
border-right: 1px;
}
.name {
width: 466px;
border: 1px solid gray;
border-top: 1px;
border-left: 1px;
border-right: 1px;
}
.pw {
width: 466px;
border: 1px solid gray;
border-top: 1px;
border-left: 1px;
border-right: 1px;
}
.gender_box {
display: flex;
flex-direction: row;
justify-content: center;
color: black;
}
.check_box {
display: flex;
flex-direction: row;
justify-content: center;
color: black;
}
.btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #0068ff;
border: 1px solid #0068ff;
border-radius: 10px;
}
이런식으로 화면에 나온다
딩코 2일차
자바스크립트
모든 것은 데이터이다!
웹페이지의 기본의 기본은 데이터 관리라고 할수 있습니다.데이터란 많은 함축적인 의미를 가지고 있지만, 기본적인 흐름을 동일합니다.
데이터가 생성되면저장할 수 있어야 하고,불러와서 출력할 수 있어야 하고,수정할 수 있어야 하며 삭제도 가능해야 합니다.
앞으로의 내용은, 지속적으로 수없이 생겨날 수 있는 데이터를 관리하고,정제하고, 사용하기 위한 방법들 입니다.
변수와 상수
변수와 상수란 무엇일까?
변수와 상수는 데이터를 담는 공간입니다.다만, 변수는 변할 수 있지만 상수는 변할 수 없습니다.
- 변수 (값이 변할 수 있음) : var , let
- 상수 (값이 변할 수 없음) : const
변수와 상수 만들기
변수와 상수를 만들기 위해서는 아래와 같은 과정을 거쳐서 만들어주시면 됩니다.
선언
변수와 상수를 사용하기 위해서는 변수 또는 상수를 선언해주셔야 합니다.? 선언(declaration)이란 변수의 이름을 알려주는 행위라고 이해하시면 됩니다.
let apple -> apple 이라는 변수가 생성되었습니다.
할당
데이터를 담을 수 있는 변수가 생성되었으니, 변수에 데이터를 할당해줄 수 있습니다.? 할당(definition)이란 변수에 데이터를 담아주는 행위라고 이해하시면 됩니다.
apple = "맛있는 사과" -> apple이라는 변수에 "맛있는 사과" 라는 데이터가 담겼습니다.선언과 할당을 한번에 선언과
변수와 상수의 종류와 특징
변수(var,let)와 상수(const)는 각자의 특징과 종류가 있습니다.바로 변수명을 중복으로 선언할 수 있는지에 대한 재선언 여부와 데이터를 수정할 수 있는지에 대한 재할당 여부인데 해당 특징은 아래 표를 보고 익히시면 되겠습니다.
상자에 담은 데이터 바꾸기
// 상수 변경하기(예제)
const classmate1 = "철수"
classmate1 = "민수" // 에러!! (다시 담기 불가능)
// 변수 변경하기(예제)
let classmate2 = "훈이"
classmate2 = "민수" // 성공!! (다시 담기 가능)
// 변수 변경하기(예제)
let classmate3 // 처음에 빈 상자로 둘 수도 있음
classmate3 = "짱구" // 성공!!
변수와 상수의 작명 규칙
- camelCase : 이름이 낙타처럼 생겼나요? javascript 에서 주로 이렇게 만듭니다.
- *snake_case** : 이름이 뱀처럼 늘어지게 생겼나요? python 에서 주로 이렇게 만듭니다.
변수와 상수의 선언과 할당 예제
선언과 할당 예제
// class/ 03-javascript/ 01-variable.js
let name
name = "정혜원"
name
// 결과 정혜원
//let 변수 재할당
name= "홍길동"
name
// 결과 홍길동
const myMoney = 0
//const 재할당
myMoney = 100
// 에러남 TypeError자바스크립트와 html연결하기
// class/ 03-javascript/ 01-variable.html
| 변수명 중복 여부 | var | let | const |
| (재선언 여부) | 가능⭕️ | 불가❌ | 불가❌ |
| 데이터 수정 여부 | |||
| (재할당 여부) | 가능⭕️ | 가능⭕️ | 불가❌ |
배열(Array)
우리는 바로 앞에서 데이터를 담는 상자로 변수와 상수에 대해서 알아보았습니다.그런데 담아야 하는 **데이터들이 여러개가 된다며 어떻게 해야 할까요?**여러개의 변수와 상수를 선언해야 할까요? 이럴 때 사용하는게 바로 배열 입니다!
배열이란?
배열이란 상자가 한줄로 나열된 기다란 통입니다.변수, 상수에서는 데이터를 1개씩 담았다면, 배열에는 여개의 데이터를 한번에 담을 수 있습니다.
대괄호[ ] 안에 데이터를 쉼표 , 로 각 데이터를 구분
배열에 데이터 담아보기
// 빈 배열
const blanksArr = [] // 아무것도 안담는 것도 가능
// 숫자들로 이루어진 배열
const numbers = [2, 10, 7, 3.3] // 숫자 담기
// 문자들로 이루어진 배열
const classmates = ["코드", "캠프"] // 문자 담기
배열 특징(index)
- index : 배열에 있는 각 데이터의 위치 index는 0부터 시작합니다.배열은 1부터 시작하지 않고, 0부터 시작한다는 것
- length : 배열의 길이 . index와 다르게 1부터 시작합니다.
배열의 메서드와 속성 - 기초
// 배열 만들기
const blanks = [] // 비어있는 배열
const numbers = [2, 10, 7, 3.3] // 숫자들로 이루어진 배열
const classmates = ["철수", "영희", "훈이"] // 문자들로 이루어진 배열
// 배열의 길이 구하기 _ length
classmates.length // 3
// 배열의 값 꺼내기
classmates[0] // "철수"
classmates[1] // "영희"
// 배열의 맨 뒤에 추가하기 _ push
classmates.push("민지") // ["철수", "영희", "훈이", "민지"]
// 배열의 맨 마지막 삭제하기 _ pop
classmates.pop() // ["철수", "영희", "훈이"]
// 배열의 요소 정렬하기, 거꾸로 뒤집기 _ sort
classmates.sort() // ["영희", "철수", "훈이"]
// 배열이 가지고있는 데이터 확인하기 _ includes
classmates.includes("철수") // true
classmates.includes("영구") // false
배열의 메서드와 속성 - 중급
const classmates1 = ["철수", "영희", "훈이"]
const classmates2 = ["민지", "민수"]
// 배열 2개 연결하기 _ concat
classmates1.concat(classmates2**) // ["철수", "영희", "훈이", "민지", "민수"]
// 배열을 문자로 만들기 _ join
classmates.join(', ') // 철수, 영희, 훈이
classmates.join("와 ") // 철수와 영희와 훈이
// 배열 분리하기 _ splice
const classmates = ["철수", "영희", "훈이"]
classmates.splice(0, 1) // ["철수"]
// 배열에서 원하는 요소만 뽑아내기 _ filter
classmates.filter((data) => (data === "영희")) // ["영희"]
classmates.filter((data) => (data !== "영희")) // ["철수", "훈이"]
// 배열에서 모든 요소 변경하기 _ map
classmates.map((data) => (data + "어린이")) // ["철수어린이", "영희어린이", "훈이어린이"]
배열 예제
// class/03-javascript/
const classmate = ["은정","혜원","재훈","예봄","정훈"]
classmate[0]
// 결과 은정
classmate[1]
// 결과 혜원
classmate[2]
// 결과 재훈
classmate[3]
// 결과 예봄
classmate[4]
// 결과 정훈
// 없는 데이터 위치를 끄집어내보겠습니다.
classmate[5]
// 결과 undefined
// "다슬" 이라는 데이터를 포함하고 있는지 확인해보겠습니다.
classmate.includes("다슬")
// 결과 false
//"다슬"이라는 데이터를 추가해보겠습니다.
classmate.push("다슬")
// 결과 ["은정","혜원","재훈","예봄","정훈","다슬"]
//"다슬"이라는 데이터를 빼보겠습니다.
classmate.pop()
// 결과 ["은정","혜원","재훈","예봄","정훈"]
//classmate의 길이를 구해보겠습니다.
classmate.length
//결과 5
// 퀴즈 풀이
let developer = ["워라벨","연봉","신분상승","성공","꿈"]
developer[1]
let dream = ["커리어","점프","할수있다"]
developer.concat(dream)
문자열
문자열도 배열처럼 사용가능
배열에 index를 이용해서 요소를 가지고 올수도 있고, 메소드를 이용해서 제어할수도 있다.
문자열도 배열과 같이 메서드를 이용할 수 있고, index를 이용해 요소를 가지고 올 수 있다.
문자열의 메서드와 속성
// 문자열(배열)
const classmates1 = "철수"
classmates1[0] // "철"
classmates1[1] // "수"
// 문자열 쪼개기
const classmates2 = "철수&영희"
classmates2.split("&") // ["철수", "영희"]
// 문자열 양쪽 공백 제거하기
const classmates3 = " 철수 & Milk "
classmates3.trim() // "철수 & Milk"
// 문자열 대소문자 변환하기
classmates3.toUpperCase() // "철수 & MILK"
classmates3.toLowerCase() // "철수 & milk"
// 문자열에 빈칸 채우기
const chulsooNumber = "1234"
chulsooNumber.padStart(10, "0") // "0000001234"
chulsooNumber.padEnd(10, "0") // "1234000000"
문자열 다루기 예제
이메일 중간에 " * " 넣기 나중에 반복문을 이용하면 더 간편하게 사용할수 있을거 같다
let email = "codecamp@gmail.com"
email.includes("@")
email.split("@")
// 결과 ["codecamp" , "gmail.com"]
let userMail = email.slit("@")[0] // "codecamp"
let company = email.slit("@")[1] // "gmail.com"
// userMail을 한글자씩 넣어주기 위한 빈배열
let maskingMail = []
maskingMail.push(userMail[0])
maskingMail.push(userMail[1])
maskingMail.push(userMail[2])
maskingMail.push(userMail[3])
maskingMail.push(*)
maskingMail.push(*)
maskingMail.push(*)
maskingMail.push(*)
// maskingMail = ["c","o","d","e","*","*","*","*"]
let emailMasking = maskingMain.join("")+"@"+company
emailMasking;
// 'code****@gmail.com'
객체
객체는 다양한 데이터를 하나의 그룹으로 묶는 보따리와 같다.
다양한 데이터를 하나로 묶기 위해서, 각각의 데이터를 키와 값으로 연결된다.
예로
키 : 값
키에는 “”를 사용하지 않음
이름 : 철수
나이 : 8
학교 : 꽃샘초등학교
—————————————
총 3개의 키와 값으로 구성된 데이터를 하나의 보따리 객체로 묶는 방법은 중괄호 { } 를 사용하여 콤마(,)로 묶어줍니다.
객체를 사용하는 이유
위에서 여러가지의 데이터를 담는 방법으로 배열이 있다 .하지만 다음의 데이터는? ["철수","남자",170,"64","구로구"]이렇듯 성격이 다른 데이터의 모음은 객체에 저장하는 것이 좋다.
객체의 특징
// 객체 선언하기
const classmate = {
name: "철수",
age: 8,
school: "꽃샘초등학교"
}
// 객체의 값 꺼내기
classmate.name // 철수
classmate['name'] // 철수
// 객체의 키&값 삭제하기
delete classmate.name
classmate = {
age:8,
school: "꽃샘초등학교"
}
4. 객체와 배열 함께쓰기
객체와 배열을 함께 사용하는 방법은 실무에서 많이 사용하는 방법 중 하나이다. 친구 10명을 페이스북과 같은 서버 컴퓨터에 요청하면, 친구정보가 들어있는 객체 보따리 10개를 기다란 배열에 담아서 보내준다.
예를들면, 다음과 같다.
// 객체들을 배열에 담아서 선언하기
const classmates = [
{
name: "철수", // 1번째 객체
age: 8,
school: "다람쥐초등학교"
},
{
name: "영희", // 2번째 객체
age: 8,
school: "다람쥐초등학교"
},
{
name: "훈이", // 3번째 객체
age: 7,
school: "토끼초등학교"
}
]
// 위 객체들을 깔끔하게 한줄로 적기
const classmates = [
{ name: "철수", age: 8, school: "다람쥐초등학교" },
{ name: "영희", age: 8, school: "다람쥐초등학교" },
{ name: "훈이", age: 7, school: "토끼초등학교" }
]
// 배열안의 객체에서 뽑아내기
classmates[0].name // 철수
classmates[0].age // 8
classmates[0].school // 다람쥐초등학교
// 배열 안의 객체에서 원하는 객체(8살 이상)만 뽑아내기
classmates.filter((data) => (data.age >= 8))
// classmates = [
// { name: "철수", age: 8, school: "다람쥐초등학교" },
// { name: "영희", age: 8, school: "다람쥐초등학교" },
// ]
객체의 기능
객체에 담긴 값을 가져올때
[]대괄호를 사용해서 값을 가져올때는 안에 key 값에 “ ”를 붙여주기
. 을 이용해서 불러오는 방식을 닷노테이션 닷 노테이션을 주로 사용함
[]을 이용한 방식은 브라켓 노테이션
브라켓 노테이션 : 키값이 동적인,(변할때) 변수가 왔을때. 매개변수로 들어가는것.
닷 노테이션은 동적인 키값 못나옴.
2일차 cyworld html css
처음에는 구분을 나눠서 큰 테두리부터 해서 양옆으로 나누고 그 안에서고 header, body, footer로 구분을 나누고 그안에서도 구분을 나눠져서 작업 하면 깔끔하게 코드가 쓰이는거 같다
<!DOCTYPE html>
<html lang="ko">
<head>
<title>이경완님의 미니홈피 :: 사이좋은 사람들 싸이월드</title>
<link rel="stylesheet" href="./styles/index.css" />
<script
src="https://kit.fontawesome.com/e3e59ff70a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="background">
<div class="outerbox">
<div class="wrapper">
<div class="wrapper_left">
<div class="wrapper_left_header">
<!-- TODAY 0 | TOTAL 12345-->
<div class="tocay">
<span>TODAY</span>
<span>0</span>
<span> | TOTAL</span>
<span>12345</span>
</div>
</div>
<div class="wrapper_left_body">
<div class="left_body_header">
<div class="left_body_header_gray"></div>
<div class="left_body_header_line"></div>
</div>
<div class="left_body_profile">
<div class="profile_detali">
<i class="fa-solid fa-user"> 이름 </i>
</div>
<div class="profile_detali">
<i class="fa-solid fa-phone"> phone</i>
</div>
<div class="profile_detali">
<i class="fa-solid fa-envelope"> email</i>
</div>
<div class="profile_detali">
<i class="fa-brands fa-instagram"> instagram</i>
</div>
</div>
<div class="left_body-footer">
<div class="wrapper_feel">
<div class="feeling">오늘의 기분</div>
<select class="feel_select">
<option value="">😊기쁨</option>
<option value="">😂기뻐서눈물</option>
<option value="">😢우울</option>
<option value="">😍사랑</option>
<option value="">😁행복</option>
</select>
</div>
</div>
</div>
</div>
<div class="wrapper_right">
<div class="wrapper_right_header">
<div class="right_header_title">사이좋은 사람들, 싸이월드</div>
<div class="right_header-setting">사생활보호설정</div>
</div>
<div class="wrapper_right_body">
<iframe src="./home.html"></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>* {
box-sizing: border-box;
margin: 0px;
}
.background {
width: 1024px;
height: 600px;
padding: 20px 0px 0px 20px;
background-image: url("../images/background.png");
}
.outerbox {
width: 808px;
height: 544px;
background-image: url("../images/outerbox.png");
}
.wrapper {
display: flex;
flex-direction: row;
padding: 32px 0px 0px 32px;
}
.wrapper_left {
width: 208px;
height: 472px;
display: flex;
flex-direction: column;
}
.wrapper_left_header {
width: 100%;
height: 30px;
}
.wrapper_left_body {
width: 100%;
height: 100%;
border: 1px solid gray;
border-radius: 15px;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 30px;
}
.left_body_header {
width: 100%;
display: flex;
flex-direction: column;
}
.left_body_header_gray {
width: 148px;
height: 133px;
background-color: gray;
}
.left_body_header_line {
border-top: 1px dotted black;
margin: 12px 0px;
}
.left_body_profile {
width: 100%;
height: 100%;
font-size: 9px;
display: flex;
flex-direction: column;
justify-content: flex-start;
color: black;
font-family: gray;
}
.left_body_footer {
width: 100%;
}
.wrapper_feel {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.feeling {
color: gray;
font-size: 11px;
margin-bottom: 5px;
}
.wrapper_right {
width: 524px;
height: 472px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 5px;
}
.wrapper_right_header {
width: 510px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding: 0px 14px;
}
.right_header_title,
.right_header-setting {
color: #55b2e4;
font-size: 9px;
}
.right_header_title {
font-size: 16px;
}
.wrapper_right_body {
width: 510px;
height: 445px;
border: 1px solid gray;
border-radius: 15px;
background-color: white;
}
iframe {
width: 100%;
height: 100%;
border: none;
}이런식으로 코드를 짰고
다음에는 오른쪽 부분을 만들아줬다 그런데
이번에는 html 파일을 하나더 만들어서 위에서 만들었던 처음 index.html에 두번쨰로 만든 home.html파일을 인덱스
파일의 오른쪽 바디 부분에
<div class="wrapper_right_body">
<iframe src="./home.html"></iframe>
</div>
이 코드 iframe 을 사용해서 home.html 을 넣어주었다
옆에 바 사이좋은 사람들 부분은 인덱스.html에 있고
그 아래부분부터 home.html에 만들어서 다음에 다른 페이지를 또 만들어서 이 부분만 변하는 식으로 만드는거 같다
home.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Home</title>
<link rel="stylesheet" href="./styles/home.css" />
</head>
<body>
<div class="wrapper">
<div class="wrapper_header">
<div class="contents_title">
<div class="title">Updated news</div>
<div class="subtitle">TODAY STORTY</div>
</div>
<div class="divideLine"></div>
<div class="contents_body">오늘의 기분 너무 좋음</div>
</div>
<div class="wrapper_body">
<div class="body_header">
<div class="video_title">
<div class="title">My video</div>
<div class="subtitle">Introduce youself</div>
</div>
</div>
<div class="video_box"></div>
</div>
</div>
</body>
</html>home.css
* {
box-sizing: border-box;
margin: 0px;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.wrapper_header {
width: 100%;
height: 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.contents_title {
display: flex;
flex-direction: row;
align-items: center;
}
.title {
color: #55b2e4;
font-size: 13px;
font-weight: 700;
}
.subtitle {
font-size: 8px;
padding-left: 5px;
}
.divideLine {
width: 100%;
border-top: 1px solid gray;
}
.contents_body {
font-size: 11px;
color: gray;
}
.wrapper_body {
width: 100%;
height: 270px;
}
.body_heaser {
width: 100%;
height: 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.video_title {
display: flex;
flex-direction: row;
align-items: center;
}
.video_box {
width: 464px;
height: 240px;
background-color: gray;
}
