웹사이트 제작에서 디자인을 담당하는 CSS

배성현·2021년 8월 26일
0

1) 학습한 내용

*폰트 적영 css태그 위쪽
<!DOCTYPE html>
<.html>
<.head>
   <.mata charst="uft-8">
  <.style>
    h1 {
         color: red;
        }
  </.style>
  +<.link rel="preconnect'" href="https://fonts.gstatic.com">
  +<.link href="https://fonts.googleapos.com/css2?family=Noto+Sans+KR:waht@100;300;400;500;700;900$display=swap" res="stylesheet"> 
  <.link rel="stylesheet" type="text/css" href="style.css">
</.head>
<.body>
  <.h1 style="background-color: pink;">Hello World<./h1>

  <.header>
    <.h1>header h1</h1>
    <.p>header p</p>
    <.a hret="#">네이버</a>
  <./header>
  <.footer>
    <h1.footer h1</h1>
    <.p>footer p</p>

*CSS에서 HTML 특정영역에 접근하는 방법.
  <.h1>Hello World</h1>
  <.h2>Nice to meet you</h2>
  <.h3>Welcome</h3>
*아이디 태그 선택자
  <.h1>Hello World</h1>
  <.h2 id="tedt1">Nice to meet you</h2>
  <.h3>Welcome</h3>
*클래스 태그 선택자
  <.h1>Hello World</h1>
  <.h2 id="test1">Nice to meet you</h2>
  <.h3 class="tesr2>Welcome</h3>
*속성 선택자
<.input type="text" placeholder="이름">
<.input type="password" placeholder="비밀번호">

  <.h2 id="color-1 font-style-1">ID 선택자</h2>
  <.h3 class="bg-1 font-size-1"  >Class 선택자</h3>
  <.p class="bg-1">Welcome</p>
  
  <.h4   id="color-1:></h4> 

<.header id="intro">
  <.div class="comtainer">
    <.h2>header h2</h2>
    <p.>header p</p>
  <.div>
</.header>
*케스케이딩
  <.h1 style="color: grat;" id=:"color-2" class="color-1">Hello Wold<h1>

header id="intro">
  div class="container">
     h1>header h1</h1>
  /div>
/header>

  header>
    div>
      <.h1>Nice<h1>
      <.ul>
          <.li>메뉴1</li>
    </.div>
  /header>
*백그라운드 속성
  div id ="bg"></div>
  img src="icon.png" width="100px" heigth="50px" alt="네이버 로고">
<./body>
<./html>

_폰트 크기 파일 css
*주석하는방법 /* */
h1 { 
      font-size: 80px;
}

header {
  color: red;
}
h1 {
  color:  blue;
}
p {
  color: green;
}

*푸터를 제외하고 상단영역에 색깔을 입히고 싶다.
header {
  color: red;
}
+ header h1 {
  color:  blue;
}
+ header p {
  color: green;

*헤더뿐만 아니라 푸터에도 각각 컬러를 적용하고싶다.
header {
  color: red;
}
+ header h1 {
  color:  blue;
}
+ header p {
  color: green;
}

++ footer  h1 {
   color: blue;
++ footer p {
   color: green;
}

*
header {
  color: red;
}
+ header h1,
  footer h1 {
  color:  blue;
}
+ header p,
  footer p {
  color: green;
};

~~*CSS에서 HTML 특정영역에 접근하는 방법.
> h1 { 
   color: red;
}
#test1 [
   color; blue;
}
.tesr2 {~~
   color: green;
속성
 input [type="text"] {
   border: solid 10px red;
}
input [type=password"]
   border: solid 10px blue;
}

bg-1 {
  background-color: red;
}
font size-1 {
  font size: 50px
}
color-1 {
  color: red;
}
#font-style-1
  font-style: italic;
}

header h2 {
  color; red;
}
header p {
  colorL blue;
}

#intro h2 {
  color; red;
}
#intro .cotainer p {
  colorL blue;
}b 
 
캐스케이딩 :  나중 입력된게 우선순위
style > id > class > tag 우선순위
> #color-2 {
  color: pimk;
}
.color-1 {
  color: green;
}
h1 {
  color: red;
}
h1 1{
  color: blue;
--
}
#imtro .container h1 {
  color: pink;
}
#intro div h1 {
  color: blue;
}
#intro h1 {
  color: blue;
}
header h1 {
  color: red;
}
--
header {
  widtf: 500px'
}
div {
  width: 300px;
  height: 300px;
  min-widtf: 600px;
  max-widtf: 800px;
  border-solid 10px red;
  border-radius 50px;
background-color: yellow;
opacity; 0.5;
}

--폰트에 영향을 미치는 태그
> *rgb, #eaeaea 폰트색지정
font-family 폰트지정
font-weight 폰트크기
text-decoration 밑줄
text-align 글자 정렬 바꾸기
opacity 글자 투명도
h1 { 
   color: rgb(123, 22, 111);
   font-size: 80px;
   font-style: italic;
   font-family: 'Noto Sans KR', sans-serif;
   font-weight: 100;
   text-decoration: unferline;
   text-align: center;
   background-color: pimk;
}

ul {
  list-style: none;
--백그라운드 속성
background-repeat: 반복효과 제어
background-position: 사진 자리
#bg {
  width: 300px;
  heigth: 300px;
  background-color: yellow;
  background-image: url(icon.png);
  background-repeat: no-repeat;
  background-position: right bottom;~~~~
  
2)학습내용 중 어려웠던 점 
오늘도 어김없이 모든 내용이 어려웠습니다...... 
역시 코딩은 저랑 안맞나봅니다... '
그치만 열심히 해서 자격증 꼭 따겟습니다..
3) 해결방법 
열심히 강의를 들으면서 코딩의 대한 이해도를 좀 더 높여나가겠습니다..
4) 학습소감
아 진짜 오늘하루분 다 들으려다가 제 머리가 팝콘처럼 팡팡 터질거같아서 
못 들었는데 괜찮나요 괜찮다고 해주세요 제발요 네? 감사하겟습니다..

0개의 댓글