▶생활코딩 WEB2 CSS - 8. 박스 모델

진작 제대로 봤으면 테이블 태그 예시나 기념일 만들기를 할 때, 

쓸데없이 많은 시간을 보내진 않았을 것 같다...^^...

그 때 웹의 elements에서 바로바로 확인했던 게 아니라서

수정→리로드→수정→리로드...를 반복하며 정말 덧없이 시간을 흘려보냈음.

 

영역 사용 범위

 

Block level element 화면(display)의 전체 영역을 사용.
Inline element 화면(display)의 특정 영역(한정된 영역)만을 사용.

화면(display) 영역을 얼마만큼 사용하는가, 하는 특성.

얘네는 태그는 아니고 일종의 특성이다.

속성...같은 걸로 봐도 되나?

 

예를 들어 h1태그는 특성상 기본적으로 Block level element에 해당한다.

화면의 전체 영역 → 이 말은 화면 가로 최대치를 쫙 차지한다고 보면 됨.

 

▶예시1

<!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>box01</title>

  <style>
    /*block level element -> 
    화면의 전체 영역을 사용.*/
    h1 {
      border-width: 5px;
      border-color: green;
      border-style: solid;
    }

    /*inline element ->
    화면의 특정 영역만을 사용.*/
    a {
      border-width: 5px;
      border-color: blueviolet;
      border-style: solid;
    }
  </style>

</head>
<body>

  <h1>CSS</h1> is the language we use to style an HTML document. (<a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>) describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an (<a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML</a>) document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.

</body>
</html>

 

영역 사용 범위를 바꾸고 싶을 때

 

뭔 소린고 하면...

· Block level element를 → Inline element처럼 사용하고 싶다면,

css에서 Block level element특성에 해당되는 곳에 → Inline element요소를 넣으면 됨. 혹은,

· Inline element를 → Block level element처럼 사용하고 싶다면,

css에서 Inline element특성에 해당되는 곳에 → Block level element요소를 넣으면 됨.

 

▶예시2

위 예시1을 바탕으로,

· h1에 display:inline;을 삽입해, Block level element를 → Inline element로.

· a에 display:block;을 삽입해, Inline element를 → Block level element로.

<!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>box02</title>

  <style>
    /*block level element -> 
    화면의 전체 영역을 사용.
    inline처럼 화면의 일부분만을 사용하고 싶다면, 
    inline요소를 넣어주면 됨.*/
    h1 {
      border-width: 5px;
      border-color: green;
      border-style: solid;
      display:inline;
    }

    /*inline element ->
    화면의 특정 영역만을 사용.
    block처럼 화면 전체를 사용하고 싶다면,
    block요소를 넣어주면 됨.*/
    a {
      border-width: 5px;
      border-color: blueviolet;
      border-style: solid;
      display:block;
    }
  </style>

</head>
<body>

  <h1>CSS</h1> is the language we use to style an HTML document. (<a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>) describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an (<a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML</a>) document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.

</body>
</html>

'1-2 css' 카테고리의 다른 글

[css] 폰트  (0) 2021.07.11
[css] <div>, <span>태그_레이아웃 설정하기  (0) 2021.07.09
[css] id, class속성  (0) 2021.07.07
[css] 속성 간략하게 쓰기  (0) 2021.07.05
[css] 선택자(Selector), css의 속성(Property)  (0) 2021.06.25

 

html의 class속성 ≠ 자바스크립트의 class

보면 사용되는 곳이 엄밀히 다른데, 명칭이 같아 헷갈리는 것들이 있다.

 

말 나온김에 몇 가지 정리해보자면,

(html의)
<a>태그		 · anchor의 약자
· 링크 역할
(css의)
a		 · all의 약자
· 전부를 의미
· 태그 아님!
<style>태그 · html내에서 태그로써 쓰임
· 예시 → <Style>a {color: green;}</Style>
style속성 · 예시 → <a href="2.html" style="color:red">CSS</a>

만약... 틀렸다면 추후 수정하는 것으로. 지식을 좀 더 쌓은 후에....

아무튼 class속성을 처음 접했을 땐, 자바스크립트의 class가 생각났음.

 

id, class속성 모두 html에서 먼저 지정시켜야 하는, html의 속성임에도,

css에서 정리하는 이유는 css에서야 두 속성이 빛을 발하기... 때문임. 

 

id, class속성

 

▶id속성

html에서 지정시킬 때 id="속성값"
css(혹은 html의 <style>태그 내)에서 불러올 때 #속성값 {}

 

▶class속성

html에서 지정시킬 때  class="속성값"
css(혹은 html의 <style>태그 내)에서 불러올 때 .속성값 {}

 

▶정리해서 비교하면,

· html에서 지정시킨 속성값을 → css에서 가져오는 법

id="속성값" #속성값 {}
class="속성값" .속성값 {}

· id, class를 각자 어느 상황에서 쓰냐면,

id · id 하나 당, 하나의 정체성만을 가짐 (고유값)
· 태그 하나 당 id속성 하나를 사용한다. 이미 한 번 적용시킨 id는 다른 태그에 또 사용할 수 없음. 
· 단, id에 부여시킨 속성값이 제각기 다르다면 하나의 태그에 여러 id가 올 수 있다.
중요한 건, 같은 속성값을 가진 id를 다른 태그에 중복해 사용할 수 없다는 것!
class · 하나의 class를 여러 곳에 쓸 수 있음 (그룹화)
· 여러 태그에 class속성을 중복해 사용할 수 있다.

 

▶선택자 우선순위: id > class > 태그선택자

· 태그선택자 예시: a, h1 등

· 같은 유형의 선택자일 경우, 

css에서 가장 마지막에 있는(가장 밑에 위치한) 선택자 일수록 → 우선순위가 높음

 

▶예시1

<!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>속성01</title>

  <Style>
    a {
      color: black;
      text-decoration: none;
    }
    h1 {
      font-size: 100px;
      text-align: center;
    }
    .test {
      color: red;
    }
  </Style>

</head>
<body>

  <h1><a href="index.html">NAME</a></h1>
  <ol>
    <li><a href="1.html" class="test">HONG</a></li>
    <li><a href="2.html" class="test">GIL</a></li>
    <li><a href="3.html">DONG</a></li>
  </ol>
  
</body>
</html>

 

▶예시2

<!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>속성02</title>

  <Style>
    a {
      color: black;
      text-decoration: none;
    }
    h1 {
      font-size: 100px;
      text-align: center;
    }
    .test {
      color: gray;
    }
    #test2 {
      color: red
    }
    #test3 {
      color:cornflowerblue
    }
  </Style>

</head>
<body>
  
  <h1><a href="index.html">NAME</a></h1>
  <ol>
    <li><a href="1.html" class="test">HONG</a></li>
    <li><a href="2.html" class="test" id="test2">GIL</a></li>
    <li><a href="3.html" id="test3">DONG</a></li>
  </ol>

</body>
</html>

 

+) html 내부 링크

 

WOW... 깜짝 놀랐다.

id 속성값(#속성값)을 불러올 수 있는 곳이 → css 뿐 만 아니라, html 내(<body>태그 내)에서도 사용 가능함.

예를 들어 <a>태그와 결합해 <body>태그 내에서 사용할 경우,

링크를 타고 html 내에서 이동하는(본문에서 본문으로 이동하는) 내부 링크가 가능하게 된다.

 

'1-2 css' 카테고리의 다른 글

[css] <div>, <span>태그_레이아웃 설정하기  (0) 2021.07.09
[css] Block level element, Inline element_박스 기본 영역  (0) 2021.07.08
[css] 속성 간략하게 쓰기  (0) 2021.07.05
[css] 선택자(Selector), css의 속성(Property)  (0) 2021.06.25
[css] html문서에서 css 연결하기  (0) 2021.05.13

 

▶준비물

· 불필요하게 중복된 코드가 많은 상태

h1 {
  border-width: 5px;
  border-color: green;
  border-style: solid;
}
a {
  border-width: 5px;
  border-color: green;
  border-style: solid;
}

 

▶줄이기

h1, a {
      border-width: 5px;
      border-color: green;
      border-style: solid;
    }

 

▶더 줄이기

h1, a {
      border:5px solid green;
    }

 

'1-2 css' 카테고리의 다른 글

[css] Block level element, Inline element_박스 기본 영역  (0) 2021.07.08
[css] id, class속성  (0) 2021.07.07
[css] 선택자(Selector), css의 속성(Property)  (0) 2021.06.25
[css] html문서에서 css 연결하기  (0) 2021.05.13
[css] css 시작하기  (0) 2021.05.10

 

클래스(Class)

 

· classification의 약자

· 클래스를 통해 이루어지는 코딩을

'객체지향형 프로그래밍(Object Oriented Programming)'이라고 한다. 객체(하나의 묶음)을 지향한다는 의미.

· 구성원이 되는 작은 요소(객체)를 의미

 

▶예시

class 과일바구니 {
  int 사과;
  int 배;
  int 참외;
}

 

인스턴스(Instance)

 

▶클래스이름 인스턴스 = new 클래스이름

· 양쪽에 위치한 클래스이름은 서로 같아야 한다.

 

클래스선언 + 인스턴스선언

 

· 클래스선언으로 먼저 정의한 후 → 이를 토대로 인스턴스선언이 이루어진다.

· 주의! 클래스선언과 인스턴스선언은 각각 다른 파일에서 작업해야 한다.

객체지향 프로래밍 특성상, 별도의 파일로 각각 다루어야 하기 때문.

· 클래스이름이 담긴 자바스크립트 파일 이름은 클래스이름과 같아야 한다

즉, 클래스이름 = (선언이 담긴)파일이름

 

▶분류

클래스선언이 담긴 파일 · 여기서 클래스 정의를 설정함
인스턴스선언이 담긴 파일 · 클래스선언을 토대로 어떻게 구성할지 설정함

 

▶클래스선언 예시 (파일명: 과일바구니.js)

//이하 클래스선언
class 과일바구니 {
  int 사과;
  int 배;
  int 참외;
}

 

▶인스턴스선언 예시 (파일명: 뭘담을까.js)

//이하 인스턴스선언
class 뭘담을까 {

과일바구니 바구니1호 = new 과일바구니(); //'바구니1호'라는 인스턴스 생성
  바구니1호.사과 = 3; //사과를 3개 담음
  바구니1호.배 = 2; //배를 2개 담음
  바구니1호.참외 = 5; //참외를 5개 담음

과일바구니 바구니7호 = new 과일바구니(); //'바구니7호'라는 인스턴스 생성
  바구니1호.사과 = 8; //사과를 8개 담음
  바구니1호.배 = 0; //배를 0개 담음
  바구니1호.참외 = 4; //참외를 4개 담음
  
}

 

▶클래스에 소유권붙이기

· public, private, protected, (없음)

'1-3 java_script > 미분류' 카테고리의 다른 글

[javascript] in 연산자  (0) 2021.08.10
[javascript] 객체(object), 속성(property)  (0) 2021.07.21
[javascript] 리턴(Return)  (0) 2021.07.03
[javascript] 변수(Variable)  (0) 2021.06.25

 

▶리턴(Return)

· 자료형에 속함

· 함수에 부여시킨 파라미터(매개변수)를 가져옴(반환시킴)

· 함수 종료시 리턴 선언으로 끝남

 

▶예시1

//이하 함수선언
function getTwice() {
  return 2;
}

//이하 함수호출
console.log(getTwice());

console.log(2)와 결과가 같다.

 

▶예시2

//이하 함수선언
function getTwice(number) {
  return number*2;
}

//이하 함수호출
console.log(getTwice(5));

console.log(2*5)와 결과가 같다.

 

▶예시3

//이하 함수선언
function getTwice(number) {
  return number*2;
}

let x = getTwice(5);
let y = getTwice(2);

//이하 함수호출
console.log(x*y);

 

▶예시4

//이하 함수선언
function hello(name) {
  return '안녕하세요, ' + name + '님!';
}

function sum(a, b) {
  return a+b;
}

let a = hello('홍길동');
let b = sum(10, 5);

//이하 함수호출
console.log(a);
console.log(b);

 

리턴... 진심 정말 헷갈림.

결과가 자꾸 오류로 떠서... 이거 하나에 온종일을 보낸 듯... 허어어.

'1-3 java_script > 미분류' 카테고리의 다른 글

[javascript] in 연산자  (0) 2021.08.10
[javascript] 객체(object), 속성(property)  (0) 2021.07.21
[javascrpt] 클래스(Class), 인스턴스(Instance)  (0) 2021.07.03
[javascript] 변수(Variable)  (0) 2021.06.25

+ Recent posts

티스토리툴바