[웹개발종합반]1주차 5~11강

1-5 css 기초

html은 뼈대, css꾸미기

꾸민다는 것은 가르킬게 있어야 함. 내가 부를 이름을 붙여주고 이름을 어떻게 하라고 명령 한다. class가 이름을 붙여준 것임.

*실습

바디에서

<h1 calss=“mytitle”> 로그인 페이지</h1>

헤드에서

<style>

.mytitle{color:red;}

</style>

 

♤실수 : login.html을 수정해서 웹페이지 : 실습1.html이 안 바뀐다고 생각하고 있었음.

 

cf)부모와 자식 관계 : 밖에 있는 것을 먹이면 기본적으로 따라가지만, 안에 따로 먹이면 따로 먹인 것을 따라간다.

 

1-6 자주쓰이는 css 연습하기(1)

▶목표 : 로그인 화면 중 아이디 비번 입력 창 위에 사진이 있는데 그 안에 글자 넣기

*실습

1)제목 박스 만들기

바디에서

<div>

<h1>로그인 페이지</h1>

<h5>아이디, 비밀번호를 입력해주세요</h5>

</div>

=>div는 박스를 주는 것.

2)div에 class를 걸어서 구분 짓기(초록 박스 만들기)

바디에서

<div class=“mytitle”>

<h1>로그인 페이지</h1>

<h5>아이디, 비밀번호를 입력해주세요</h5>

</div>

헤드에서

<style>

.mytitle{

backgroundcolor = green;

}

</style>

3)박스 크기 및 내용 조정하기

헤드에서

<style>

.mytitle{

backgroundcolor = green;

width : 300px;

height : 200px;

color : white;

text-align : center;

}

4)박스에 이미지 넣기

코드스니펫에서 url 복사

헤드에서

<style>

.mytitle{

backgroundcolor = green;

width : 300px;

height : 200px;

color : white;

text-align : center;

background-image : url(“https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg”);

}

cf)이미지가 안 나오는 것으로 착각 가능(사이즈가 중요)

background-size : cover;

background-positon : center;

를 추가

cf)3개는 항상 같이 다니고, 이미지-사이즈-포지션 또는 이미지-포지션-사이즈 이렇게 순서는 상관 없음.

5)귀퉁이 둥글게 처리

<style>

.mytitle{

backgroundcolor = green;

 

width : 300px;

height : 200px;

 

color : white;

 

text-align : center;

 

background-image : url(“https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg”);

background-size : cover;

background-positon : center;

 

border-radius: 10px;

}

cf)비슷한 카테고리끼리 엔터 쳐서 띄어 쓰기하면 한눈에 보기 편함. (위와 같이)

6)박스 내에서 간격 조절하기(마진과 패딩 이용)

cf)마진과 패딩의 개념 이해하기 -> 버튼 활용(마진은 바깥 여백, 패딩은 안쪽 여백)

버튼에다가 mybtn class부여 해서 스타일에서 조정

-margin:20px; 하면 상하좌우 다 띄우는 것 / 위, 오른쪽, 아래, 왼쪽 시계방향으로 각각 지정도 가능 (margin 20px 30px 20px 20px 이렇게 따로 쓰면 오른쪽만 30 px 띄움)

padding

안쪽 여백 중 위쪽에 간격을 두고 싶으므로 padding-top: 40px; 하면 원하는 모양 완성!

 

1-7 자주 쓰이는 css 연습하기(2)

1)로그인 페이지를 가운데로 가져오기

바디 전체를 하나의 div로 묶어주고 class 지정

<div class=“wrap”>

바디 전체를 넣어주기

</div>

헤드에 wrap에 관한 설정 하기(잘 묶였는지 확인하기 위해 배경색 지정)

.wrap{backgruond-color : green;}

줄 맞추기(양쪽 여백을 줘야 하는데 꽉차있어서 여백을 줄 수가 없음. 그래서 wrap의 가로 길이를 줄여야함.

.wrap{width : 300px;}

그 후 양쪽 여백 주기(바깥 여백)

margin: auto; (여기서 auto는 상하좌우를 최대한 미는 것이라고 생각하면 됨.

그 후 배경색 지워주면 끝!

 

css는 남들이 만들어 놓은 것 이용 가능. 그것이 바로 부트스트랩

 

1-8 폰트, 주석, 파일 분리

1)구글 웹폰트 입히기(코드니스펫 복사해서 웹주소창에 붙여넣기)

그 중 마음에 드는 글씨체 고르기

누르면 ‘select this style’이 있음. 옆에 작은 창 뜸.

use on the web 부분(link, import)중 <link>가 3개가 있는데 그 중 맨 밑에 부분을 복사해서 헤드에 <title> 밑에 붙여넣기

더 내려가면 css부분 있는데 복사해서 <style>안에 *하고 {}해서 붙여넣기

<style>

*{font-family: 'Jua', sans-serif;

}

cf)‘*’은 모든 태그에 먹이겠다는 뜻

 

2)주석 달기

주석 : 설명을 붙여넣거나, 잠깐 이 코드를 안 쓸 때 작동하지 못하도록 하는 것

‘crtl+/‘하면 주석 처리(다시 풀 때도 같은 방법)

css,js,html은 다 주석이 다르게 생겼음. 하지만 하는 방법은 다 ‘crtl+/‘

 

3)css 파일 분리

css style이 너무 길어지면 파일을 분리한 후 불러오는 것이 가능.

프론트 엔드에서 새로 만들기-스타일 시트-mystyle.css 파일 만들기-스타일 안에 모든 것을 복 붙 - <style> 삭제 후 그 자리에

<link rel=“stylesheet” type=“text/css” href = “mystyle.css”>해주면 불러옴.(주석 처리해서 확인해보면 다 깨져서 나오는 것을 알 수 있음)

 

붓을 질 줄 알는 것과 예쁘게 그리는 것은 다르다 그래서 부트스트랩을 활용해야 한다.

 

1-9 부트스트랩, 예쁜 css 모음집

1)부트스트랩 : 예쁜 css를 모아둔 것

부트스트랩 사이트에서 시작 탬플릿을 미리 받아둠. 코드스니펫에서 복사.

파이참 – 프론트엔드(오른쪽 마우스) -새로작성 –html파일 –index.html 만들기 – 독타입 지우고 코드스니펫에서 복사한 것 붙여넣기

-부트스트랩 컴포넌트 5.0 코드스니펫 클릭 –웹 주소창에 붙여넣기 한 후 페이지 확인 – 조금 밑으로 내리면 버튼들이 있는데 여기서 맨 위에 코드 primary 복사 -<bdoy>에 ’<h1>이걸로 시작해보죠</h1>’ 지우고 붙여넣기 –primary 라는 글자를 나는 버튼이다 라고 변경하고 저장

우리가 색이랑 모양을 따로 지정하지 않아도 자동으로 이쁜 결과물이 나옴. 다 부트스트랩이라는 사이트에서 바로 가져온 것.

 

1-10 css꿀팁 한번 더 배우기

1)부트스트랩만 쓰기에는 아쉬움. 알고 있는 css를 쓰고 섞어야 함.

실습

 

1-11 css 꿀팁 – 폰트 넣기

1) 폰트 넣기는 배운 방식대로 하면 됨.

2) 배경 이미지를 어둡게 하기

background-image : url 앞에 ‘,’ 쓰고 linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 붙여넣기 하면 됨. 0.5로 밝기 조절 가능

background-image : linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) , url

 

♧막힌 것

a. 제목 내 글자 위에 띄우기.

->내용물 위치 조정하는 방법

display : flex;

flex-direction : column;

justify-content: center;

align-items: center;

cf)위 네 개는 항상 같이 다님. 암기할 필요 없고 column하고 row만 바꿔서 씀.

column 하면 버튼이랑 위, 아래로 / row 하면 옆으로 병렬

 

b. 버튼 위치 가운데로 하기.

->a 와 같이 해결됨.

+) 버튼 수정하기

<style>에서 .myltitle > button {

}

해주면 바로 조정 가능. 여기서 버튼 크기와 모양 등 조정

<style>에서 .myltitle > button {

width : 200px;

height : 50px;

 

background-color:transparent;

}

테두리 모양 : border-radious : 50 px;(숫자가 높을수록 더 둥글어짐.)

테두리 색 : border-color 이긴 한데 테두리에 대한 여러 정보는 보통 하나의 코드에 담음.

border : 1px solid white;

cf);쓰면 제대로안됨. 1px은 선 굵기, solid는 실선, white는 테두리 색)

버튼과 제목 공간 띄우고 싶으면 margin-top: 10px;

 

♡빼먹은 것

a. 제목 박스 높이와 가로.

<style>

.mytitle{

width : 100%; <- 꽉 차게 하기

height: 250px;

}

b. 굳이 제목을 따로 class 지정해줄 필요 없음. 그냥 mytitle에서 color로 해줘도 됨.

c. 불필요한 코드를 삭제할 때 하나라도 빼먹고 지우거나 하면 적어놓은 모든 코드가 작동 안함.

d. 마우스를 올렸을 때 선이 굵어지게 하는 것.(이 때 mytitle 호버는 새로 만들어야함.)

.mytitle > button:hover {

바꾸고 싶은 방식으로 적기 ex)border : 2px solid white;

}