250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

개린이 개발노트

국비지원 JAVA(자바) 프로그래밍(CSS) 본문

국비지원(국비교육) 웹 개발자 과정

국비지원 JAVA(자바) 프로그래밍(CSS)

개린이9999 2022. 12. 15. 09:15
728x90

 국비지원 JAVA에 관심있으신 분이나 교육과정 어떤 걸 선택해야할 지  고민이라 들어오신분은 댓글 남겨주시면 제가 아는 한 상세히 설명드리겠습니다! 

 

 

 

CSS 

인라인 스타일 시트

<h1 style="background-color: aqua;">Hello CSS</h1>
-> 태그 안에 직접넣는 방식
 
내부 스타일시트
 
<style>
  p{
    color: red;
  }
</style>
스타일태그를 추가시키는 방법
위차가 중요 css는 헤드 쪽에 입

직접 css 만들기 

.css

h3{
  text-align: center; 
  color: pink;
  background-color: antiquewhite;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  p{
    color: red;
  }
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1 style="background-color: aqua;">Hello CSS</h1>
  <p>CSS연습</p>
  <h3>이것저것 스타일 적용해보기</h3>
</body>
</html>

선택자(제일 중요!)

내가 원하는대로 정확하게 스타일 적용

타입 선택자: 직접 태그명을 써서 적용

전체 선택자: 모든 것을 동일 하게 적용 시킬떄 (*)

클래스선택자: 해당클래스만 적용 

아이디 선택자: 해당아이디만 적용 

 

바깥쪽에 있는게 부모 태그 안에있는 것이 자식이 됨 ↓

 

형제 ↓

아이디가 가장 우선 -> 클래스->타입 순으로 

되도록 겹치지않도록 작업하는 것이 좋으나 겹치면 위의 순으로 적용됨

폰트설정하기

px(픽셀) ,em, %, pt

단위 작업은 픽셀로 함 

  font-size: 30px;\
클래스 따로 만들어서 작업많이함
 
  font-weight: 400;
  100~900 숫자로 지정하거나,<b> ,;lighter, bold, normal 등으로도가능

줄 간격 설정하기 

  font-family: 'Courier New', Courier, monospace;
폰트설정
 
폰트스타일
  font-style: ;
 font-variant: small-caps; -> 작은대문자로 바꿔
 
font: [weight, style, variant] [size/height], [family] 순서 
  font:bold italic small-caps 30px/150% "굴림", Gulim;
이런식으로 만듦 // 글자크기랑 글꼴 설정은 생략 불가능

font 색깔

color: rgb(red, green, blue)
color:#ff8080;
 
text-decoration: underline; 밑줄긋기
 
text-decoration: overline; 윗줄긋기
text-decoration: line-through;
text-decoration: none; 을 젤 많이씀
 

버튼보다 a태그를 주로 사용하는데 text-decoration: none; 을 자주사용.

 

 text-transform: uppercase; 대문자 변
  text-transform: lowercase; 소문자로 변경
 text-transform: capitalize; 첫번쨰 글자만 대문자로 변경

 

 text-shadow: 2px 2px 5px redl; 그림자 설정
순서대로
x축(왼쪽(음수)오른쪽(양수) 이동) , y축 이동(위쪽(양수)아래쪽 이동), 그림자 퍼짐정도, 그림자 색깔을 나타냄
 
 
 letter-spacing: 5px; 자간설정하기 
  word-spacing: 50px; 단어와 단어사이 간격 설정
  text-align: center; 가운데 정렬
  text-align: right; 오른쪽 정렬
  text-align: left;  왼쪽 정렬
  direction: ltr; 글자 방향설정
  text-indent: 50px; 들여쓰기
 

폰트 다운받아서 사용하기 

 

구글 웹 폰트 이용

 

 

스타일을 다운받으면 html에 넣어야함 

스타일에서 스타일 태그 빼고 import 부분만 넣으려면 css부분에 복사한 것을 import만 해주면됨

,패밀리 순

 

눈누 (noonnu.cc)

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

 

눈누도 사용가능

폰트이름: merienda 만들어보기

글꼴색:gold

body {

background-color:black;

}

 

@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@800&family=Noto+Sans+KR&display=swap');
body{
  background-color:black; 
}

h1{
 font-family: 'Merienda',cursive;
  font-size: 100px;
  color: gold;
  text-shadow:  0 0 30px white;
  font-weight :100;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@800&family=Noto+Sans+KR&display=swap');
    </style>
</head>
<body>
  <h1>
  HTML5 & CSS
</h1>
</body>
</html>

결과물

시간이 없어서 이정도만함. 나는 역시 디자인에 소질이없다. 그렇다 나는 백엔드 개발자 할 운명이다.

목록 만들기

html 은 ol,ul,li 태그를 이용

  list-style-type: disc; 
모양설정
list-style-type: upper-roman; 로마 대문자
list-style-type: lower-roman; 로마소문
 
list-style-type: upper-alpha; 대문자list-style-type: loewr-alpha; 소문자
 
 
 

파비콘

 

 

탭 맨 왼쪽에 있는 이미지

16x16이면 충분함 

단축키는 32x32

데스크탑용 96x96

애플터치 180x180

 

파비콘 만들어보기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="icon" href="img/pepe.jpg">
  <link rel="stylesheet" href="css/style2.css">
</head>

헤드에 경로 넣어줌

페페로 파비콘 바뀜

구글에 폰트어썸 클릭 후 

Font Awesome

 

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

회원가입 진행 
받은 키트번호 헤드부분에 먼저 넣고

무료 폰트 복사 

 

html 바디부분에 넣어줌 

styleclass 에서도 수정 가능

배경 넣기 

투명도 설정

투명도 설정
.bg{
  background-color: rgba(255, 255, 0, 0.5);
} 
 
 
   background-repeat: repeat-x;
   background-repeat: repeat-y;
   background-repeat: no-repeat;
   background-size: auto; 배경 사이즈 원본크
   background-size: contain; 요소크기만큼
   background-size: cover; 브라우저 창에 맞춰서
   background-position: bottom right; 바닥 오른쪽 
   background-position:top left; 최상위 왼쪽
   background-position:center; 가운데
-> top, bottom, left,right, center 적절히 이용하기
 
   background-position:1eft 100px top 30px; 이런식으로 이용가능
 
근데 웬만하면
 

Free Gradients Collection by itmeo.com

Free collection of 180 background gradients that you can use as content backdrops in any part of your website.

webgradients.com

 

이런데서 복사해서 쓰자.. 나는야 이제 풀스택개발자!

인라인 - span, a, b, u, i, strong

- 한줄에 여러개 배치

- 기본 너비값: 컨텐츠 크기값

-크기값을 가질 수 없음

-상하 마진값은 불가능, 좌우만 가능

span{
  border: 1px solid red;
  width: 500px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

 

블록 - div, h1~h6,ul,ol,li

한줄에 한개

기본너비값은 100%

크기 설정 가능

-상하좌우 마진값은가능

 

 

인라인 블록:  img 

한줄에 여러개 배치

기본너비값 컨텐츠 크기값

크기 설정 가능

상하좌우 마진값 가능

 

마진

위의 이미지에 margin border padding 다나옴~!

 

네비게이션 바 만들기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style2.css">
</head>
<body>
  <ul class="nav">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JAVA</a></li>
    <li><a href="#">JSP</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</body>
</html>

 

 

.nav {
  list-style: none;
}

/* 
아래 처럼 전체로 잡는것 보다 아래 두 번째 방법 처럼 구체적으로 하는게 좋다.
a {
  text-decoration: none;
} */

.nav li a {
  text-decoration: none;
}

.nav li {
  float: left;
  text-align: center;
  width: 10%;
}

박스 모델

html의 태그들을 사각형으로 인식해서 처리 -> 

table {
  width: 50%;
  border: 1px solid black;
  /* border-collapse: collapse; */
  table-layout: fixed;
  caption-side: bottom;
  empty-cells: hide;
}

td, th{
 border: 1px solid black;
}

img{
width: 50px;
vertical-align: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
  <table>
    <caption>표 제목 </caption>
      <tr>
        <th>머리글</th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td><img src="pepe.jpg">내용</td>
        <td></td>
        <td>내용</td>
        <td>내용</td>
      </tr>
      <tr>
        <td>내용</td>
        <td>내용</td>
        <td></td>
        <td>내용</td>
      </tr>
      <tr>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
        <td>내용</td>
      </tr>
  </table>
</body>
</html>

테이블 기본속성

포지션

float : left-> 해당 요소를 컨테이너의 왼쪽 배치

float : right-> 해당 요소를 컨테이너의 오른쪽 배치

float:none-> float 적용 안함

margin auto->중앙배치!

728x90

'국비지원(국비교육) 웹 개발자 과정' 카테고리의 다른 글

국비지원 JAVA(자바) 프로그래밍 (카카오톡 프로필사진만들기)  (0) 2022.12.19
국비지원 JAVA(자바) 프로그래밍 (박스사이징)  (0) 2022.12.16
국비지원 JAVA(자바) 프로그래밍( Visaul Studio Code( VS CODE) 비쥬일 스튜디오,  (0) 2022.12.14
국비지원 JAVA(자바) 프로그래밍(자바, MariaDB, 마리아디비 )  (0) 2022.12.13
국비지원 JAVA(자바) 프로그래밍(네트워크,OSI7계층,클라이언트,서버 동작과정, )  (0) 2022.12.12
'국비지원(국비교육) 웹 개발자 과정' Related Articles more