반응형

공부하는도중 갑작스레 궁금증이 생겼습니다.

css 가상요소인 after 이나 before은 :after / :before 도 적용되고

::after / ::before도 적용이 됩니다.

그러나 가상클래스인 nth-child앞에 (:)이 아닌 (::)을 작성하면 적용이 되지 않았습니다.

 

그러면 가상요소와 가상클래스를 어떻게 구분짓고 올바르게 사용할 수 있을까요?

일단 HTML에 존재하는 요소를 선택하면 가상 클래스,

HTML에 존재하지 않지만 가상을 요소를 생성하여 선택하는것이 가상 요소 선택자라고 보시면 될 것 같습니다.

 

여기

 

[CSS] 꼭 알아야할 CSS선택자

CSS선택자 하면 떠오르는 선택자는 id, class 정도가 있고 자식, 자손에 대한 기초를 알고 있으실 겁니다. 하지만 꼭 알아두면 좋은 선택자 30가지에 대해서 전부 알고계시지는 않을겁니다. (만약 알

ggaesang.com

를 클릭하여 선택자들을 확인 할 수 있습니다.

위 링크안에서, 

::after / ::before / ::first-line / ::first-letter 이 가상 요소

나머지는 전부 가상 클래스 였습니다.

반응형

'기타' 카테고리의 다른 글

API 간단 설명  (0) 2020.08.27
[자바스크립트] 스크립트언어 / 인터프리터와 컴파일러 차이점  (0) 2020.08.27
[자바스크립트] 프레임워크란?  (0) 2020.08.27
[SW] 버전관리 시스템(VCS)의 개념과 사용이유  (0) 2020.08.27
반응형

알쓸(알아두면 쓸만한) CSS 선택자 

CSS선택자 하면 떠오르는 선택자는 id, class 정도가 있고 자식, 자손에 대한 기초를 알고 있으실 겁니다.

하지만 꼭 알아두면 좋은 선택자 30가지에 대해서 전부 알고계시지는 않을겁니다.

(만약 알고계신다면... 돌아가셔도 좋습니다 ㅠ.ㅠ)

저도 열심히 암기하기위해 정리하고 있습니다.

그럼 지금부터 정리한 것들을 조금씩 설명 드리겠습니다.

1. *

  • 별표는 전체요소를 대상으로 합니다. ( reset.css 등에서 많이 보았습니다. 다만 사용하지말라고 권하네요)

2. #

  • id선택자입니다.
  • 가장 흔하고 쉽게 사용됩니다.

3. .

  • class를 선택할때 사용합니다.

4. li a

  • 자손 선택자 입니다.
  • 더 상세히 작업해야 할 때 이 선택자를 사용합니다.

5. a

  • 태그 선택자입니다. 
  • 특정 태그 전체를 대상으로 해야할때 사용합니다.

6. a:link / a:visited

  • 클릭하기전 상태와 크릭한 후 상태를 대상으로 하기위해 :link , :visited 가상클래스를 사용합니다.

7. +

  • 인접 선택자입니다.
1
2
3
4
5
6
7
<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
</ul>
<p> P 태그 </p>

이렇게 적용된 모습을 확인 할 수 있습니다.

 

8. >

  • >는 직계 자식만 선택합니다.

예를 들면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<header>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>
                E
                <ul>
                    <li>E-1</li>
                    <li>E-2</li>
                    <li>E-3</li>
                </ul>
            </li>
        </ul>
</header>

이러한 마크업일때 , CSS를 

1
2
3
header ul{
    border: 1px solid red;
}

이렇게 코드를 작성 한다면, 

이렇게 li의 자식인 ul까지 border가 생성됩니다.

그렇지만 

1
2
3
header>ul{
    border: 1px solid red;
}

이렇게 작성한다면 

직계 자식만 CSS가 적용된 것을 볼 수 있습니다.

 

9. ~

  • 형제 선택자는 인접선택자와 비슷하지만 덜 엄격합니다.
  • 인접선택자는 바로 뒤에오는 첫번째 요소만 적용되지만, 형제선택자는 뒤에오는 모든 요소를 선택합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    ul~p{
        color:green;
    }
</style>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<p>AA</p>
<p>BB</p>
<p>CC</p>

 

10. [title]

  • 속성 선택자입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[title]{
            color:green;
        }
    </style>
</head>
<body>
    <a href="#" title="naver">naver</a>
    <a href="#">daum</a>
    <a href="#">google</a>
</body>
</html>

 

11. [href=""]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href="https://google.com"]{
            color:green;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

 

href속성으로도 찾을 수 있습니다. 하지만 이렇게 적용하기에는 너무 융통성이 없습니다.

그렇기 때문에 우리는 약간의 정규식 표현을 사용할 수 있습니다.

 

12. [href*=""]

  • *는 입력값이 속성값안 어딘가에 있는것을 의미합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href*="google"]{
            color:green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

* => 0개 이상의 문자를 포함합니다. a*b 는 ab, abb, aab, aababa 등을 포함합니다.

 

13. [href^="http"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href^="http"]{
            color:green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

문자열의 시작을 표기하는 정규표현식에서 흔하게 사용됩니다.

href^="http" => http로 시작하는 href를 의미하게 됩니다.

^ = 문자열이나 행의 처음을 의미합니다.

 

 

14. [href$=""]

  • $는 ^와는 반대로 문자열이나 행의 끝을 의미합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href$="net"]{
            color:green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

15. :checked

  • 이 가상 클래스는 체크박스나 라디오버튼처럼 체크가되는 사용자 인터페이스 요소만을 대상으로 합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        input[type=radio]:checked+label{
            color:red;        
 
        }
    </style>
</head>
<body>
    <form action="/" method="post">
        <input type="radio" name="checkRadio" value="checkRadio" />
        <label>체크하면 색깔 바뀜!</label>
    </form>
</body>
</html>

 

체크 전

 

체크 후

16. ::before / ::after

  • befor 과 after 가상요소는 선택된 요소 주변에 콘텐츠를 생성합니다.
  • 이 클래스는 여러가지 방법으로 활용할 수 있습니다.
  1. gnb 구분 bar 넣기
  2. 앞, 뒤에 추가적인 정보를 넣기
  3. float 해제
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
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul{
            list-style:none;
        }
        nav li {
            float: left;
            margin-right: 30px;
        }
        nav li:before{
            content:"our ";
        }
        nav li:after{
            content:"ㅣ";
            padding-left:30px;
        }
        nav li:after:first-child{
            content:"";
        }
       nav ul:after{
            display:block;
            clear:both;
            content:"";
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Home</li>
            <li>Address</li>
            <li>Location</li>
        </ul>
    </nav>
</body>
</html>

17. :hover

  • 사용자가 요소위에 커서를 올릴때 스타일을 적용합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p:hover{
            color:red;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <p>마우스를 올리면 색깔이 변함</p>
</body>
</html>

 

18. :not

  • 특정 태그만 제외한 모든 요소를 선택하고 싶을때 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p:not(#number){
            color:red;
        }
    </style>
</head>
<body>
    <p id="number">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>
</html>

 

 

19. ::가상요소

  • 첫번째줄이나 첫글자와 같이 요소 일부분에 스타일을 적용할 수 있습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p::first-letter{
            margin-left: 30px;
            font-size:24px;
            font-weight:bold;
            color:blue;
        }
        p::first-line{
            color:green;
        }
    </style>
</head>
<body>
    <p>가상요소는 ::로 표현합니다 <br />
    꼭 block요소에 적용해야합니다.</p>
</body>
</html>

 

 

20. :nth-child(n) / :nth-last-child(n)

  • 여러 요소중에서 특정 요소만 지목하는 방법입니다.
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        li:nth-child(7){
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
    </ul>
</body>
</html>

 

이렇게 숫자를 사용하여 표현할 수 있고 만약 짝수번째마다 필요하다면

1
2
3
4
5
    <style>
        li:nth-child(2n){
            color:red;
        }
    </style>

 

이렇게 사용도 가능합니다.

 :nth-last-child(n)는 

 

21. :nth-of-type(n) / :nth-last-of-type(n)

 

  • child요소가 아닌 type을 선탁할 수 있습니다.
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
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul:nth-of-type(3){
            border: 2px solid black;   
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>ㄱ</li>
        <li>ㄴ</li>
        <li>ㄷ</li>
        <li>ㄹ</li>
        <li>ㅁ</li>
    </ul>
</body>
</html>

 

:nth-of:type도 마찬가지로 거꾸로 순서가 적용되는 :nth-last-of-type(n)도 사용 가능합니다.

 

22. :first-child / :last-child

  • 요소의 첫번째 또는 마지막 자식만 대상으로 삼을 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul{
            list-style:none;
        }
        ul li{
            border-top: 1px solid black;
            text-align:center;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</body>
</html>

뭔가 어색함을 느씰 수 있습니다.

A위에 선이 없다면 더욱 예뻐보일것 입니다.

우리는 A에게 따로 class를 주고 border: none; 을 사용해도 되지만

1
2
3
4
5
6
7
8
9
10
11
12
    <style>
        ul{
            list-style:none;
        }
        ul li{
            border-top: 1px solid black;
            text-align:center;
        }
        li:first-child{
            border:none;
        }
    </style>

이렇게 first-child를 사용하여 테두리를 없앨 수 있습니다.

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
[CSS] CSS 기초설명, Cascading 이란?  (0) 2020.08.27
[HTML] HTML 기초설명  (0) 2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27
반응형

CSS란?

  • CSS는 Cascading Style Sheet 의 약자입니다.

 

CSS적용 방법

CSS를 적용하는데에는 3가지 방법이 있습니다.

  1.  Inline Style Sheet 
    • HTML 태그의 style속성을 사용하여 CSS코드를 넣는 방법입니다.
    • 단점으로는 꾸미는데 한계가 있고, 재사용이 불가능 합니다.

    •  

      1
      <p style="color:red;"> Shnav.tistory.com </p>
  2.  Internal Style Sheet
    • 문서 head안 <style>과</style> 사이에 CSS코드를 넣는 방법입니다.
    • HTML문서안의 여러 요소를 꾸밀수 있는것이 장점이지만, 다른 HTML문서에 적용할 수 없다는 단점이 있습니다.
    • 1
      2
      3
      p{
          color:red;
      }
  3.  Linking Style Sheet
    • 이는 별도의 CSS파일을 만들어 HTML문서와 연결하는 방법 입니다.
    • 어러 HTML문서에 사용할 수 있습니다.
    • 1
      <link rel="stylesheet" href="css/style.css">

 

Cascading ?

  • HTML요소는 하나 이상의 스타일에 영향을 받을 수 있는데 어떤 스타일을 적용 받을지에 대한 우선순위가 정해져야합니다. 이를 Cascading이라고 합니다.

캐스캐이딩 (cascading)은 다음 3가지에 의해 결정 됩니다.

  1. CSS가 어디에 선언되어있나 (중요도)
  2. 대상을 명확하게 지정할수록 높은 우선순위를 가지고 있습니다 (명시도)
  3. 코드 순서

중요도

  •  태그내에서 style속성
  •  <head> 의 <style> 
  •  <head>의 <style>안에 @import
  •  <link>로 연결된 CSS 파일
  •  <link>로 연결될 CSS파일 내의 @import

<link>로 연결된 css파일보다 head내의 style이 우선순위가 더 높습니다.

html요소 style속성을 사용하는것보다 style이나 외부 css파일로 빼는것이 더 좋습니다.

※ style이나 외부 css파일로 빼는 이유는 다음과 같습니다.

  • 스타일과 마크업을 명확하게 구분합니다 (마크업에 관한 설명은 해당 링크를 타고 들어가시면 확인이 가능합니다)
  • 선택자를 사용하면 페이지 여러요소에 규칙을 적용하여 관리를 개선하며 중복을 피할 수 있습니다.

 

명시도

  • !important
  • id 선택자
  • class 선택자
  • 태그 선택자

!important는 명시도 자체와 아무 관련이 없지만, 명시도에 직접적인 영향을 미칩니다.

!important는 남용하면 안됩니다.

※ !important를 남용하게되면 캐스캐이딩을 깨트려 디버깅을 어렵게 합니다.

 

 

명시도 계산법

!important (10000) > inline-style(1000) > id(100) > class(10) > tag(1) > * (0)

계산법에 의하면 !important는 나와있지않지만 어찌되었든 가장 강력하게 적용됩니다.

inline-style은 흔히 우리가 태그에 style 속성을 부여하여 css를 입혔을때를 의미합니다.

 

몇가지 예를 들어보겠습니다.

div p span 3개의 요소이므로 3점 입니다.
#nav ul li id1개와 요소2개 이므로 102점 입니다.
#nav .photo li id 1개와 class 1개 그리고 요소 1개 이므로 111점 입니다.
#header h1 .logo id 1개와 요소 1개 그리고 class 1개이므로 111점 입니다.
.recipe a:hover class 1개와 가상클래스 1개 요소 1개 이므로 21점입니다.

 

코드 순서

1
2
3
4
5
6
7
8
9
<style>
  p {
    color: red;
  }
  p {
    color:blue;
  }
</style>
<p>Hello</p>

 

이러한 상태에서 Hello는 어떤 색깔이 될까요?

이는 늦게 선언된 스타일이 우선 적용 됩니다. 즉 Hello는 파란색이 됩니다.

 

 

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
알아두면 좋은 CSS 선택자  (0) 2020.08.27
[HTML] HTML 기초설명  (0) 2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27
반응형

HTML이란?

- HTML은 HyperText Markup Language의 약자이며, HTML 문서라도 불립니다.

- HTML은 HTML 태그를 이용하여 웹페이지를 만드는 데에 사용하는 언어이며 매우 쉽게 배울 수 있습니다.

- HTML이 가지고 있는 각각의 태그와 속성들은 이미 다 정의되어있어 우리는 몇 가지의 태그들과 속성만 안다면 간단하게 웹 페이지를 만들 수 있습니다.

HTML5?

- HTML5는 HTML언어의 최신 표준 권고안입니다.

- HTML5는 기존 XML이나 XHTML과는 다르게 문법적으로 매우 유연한 언어입니다.

- HTML5는 오류를 쉽게 처리할 수 있게끔 몇 가지 기본원칙을 바탕으로 설계되어있습니다.

  또한 새로운 폼 속성들을 추가하여, 폼 검증과 디자인이 간소화되었습니다.

- HTML5는 플러그인 없이도 비디오나 오디오를 비롯한 미디어 재생이 가능합니다.

HTML 태그?

- HTML 태그는 웹페이지의 디자인이나 기능을 결정하는 데 사용됩니다.

- HTML 태그는 < >로 감싸서 표현합니다.

- HTML태그는 보통 시작 태그와 종료 태그 이렇게 한쌍으로 구분됩니다.

( 종료 태그는 뒤에 /가 붙습니다.)

- 대부분의 태그가 이렇게 한 쌍으로 구분되어 있지만 시작 태그만 있고 종료 태그가 없는 태그들이 존재합니다.

(Ex. <hr> , <img>, <br> 등)

- HTML 태그는 inline 요소와 block 요소로 나누어집니다.

 

block 태그 inline 태그
자신의 내용으로 한 라인을 독점해서 출력합니다. 구성요소의 역할을 합니다. 
모든 인라인태그를 포함 할 수 있습니다. 항상 block 태그 안에 포함되어 있으며, 기본적으로 컨텐츠가 끝나는 지점까지의 넓이를 가지고 있습니다.
가로폭 전체의 넓이를 가지는 직사각형 형태가되며 block태그 다음에는 줄바꿈이 이루어집니다. 다음에는 줄바꿈이 없고 우측에 바로 이어져서 표시가 됩니다. 자식으로 같은 inline 태그를 가질 수 있지만 block 태그를 자식으로 가지지 못합니다.
 vertical-align 이나 text-align이 적용되지 않습니다. width, height값이 적용되지 않습니다.
block요소의 대표적인 태그 <div> inline요소의 대표적인 태그 <span>

※ 종료 태그가 없더라도 HTML 문서를 제대로 표현해 줄 수도 있습니다. 

    하지만 종료 태그가 없다면 예상치 못한 오류나 결과가 발생할 수 있으니 빠트리지 않고 작성하는 게 좋습니다.

 

HTML 요소 구조

- HTML요소는 여러 가지의 속성을 가질 수 있으며 이러한 속성은 해당 요소에 대한 추가적인 정보를 제공합니다.

- HTML요소는 시작 태그 내에서만 존재할 수 있습니다.

- HTML요소는 속성 이름과 속성 값으로 표현됩니다.

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>제목</title>

</head>

<body>

    <p class="attr">

        속성을 가진 태그

    </p>

</body>

</html>

 

여기서 class는 속성 이름, attr은 속성 값이 됩니다.

- HTML요소의 속성 값은 항상 큰 따옴표 , 또는 작은 따옴표로 감싸서 사용해야 정확한 값을 저장할 수 있습니다.

속성이름 설명
id 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다.
class 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
hidden css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
style 요소에 스타일을 지정한다.
title 요소에 관한 제목을 지정한다. (툴팁이라 불린다)

 

 

 

HTML의 기본 구조

  •  HTML의 기본 구조는 HTML 태그 사이에 헤드, 바디로 나누어집니다.
  • <HEAD> 태그 사이에는 META, TITLE, SCRIPT, STYLE, LINK 등의 태그들로 이루어져 있습니다.
  • 이러한 태그들은 메타데이터라고 표현하며, 메타데이터는 웹 상에 직접적으로 표현되지 않는 정보들을 의미합니다.

META 태그

  • 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는 데 사용됩니다.
  • HTML 문서 내에 디자인에는 전혀 영향을 미치지 않고 문서가 어떠한 내용을 담고 있는지,
  • 누가 언제 만들었는지 등의 특성을 담고 있습니다.

LINK 태그

  • 링크 태그는 문서간 연결하거나 외부 리소스 연결시 사용됩니다.

TITLE 태그

  • 웹 페이지의 제목을 나타내는 데에 사용됩니다. 웹페이지 본문에서는 보이지 않고 브라우저의 탭에서 확인할 수 있습니다.

SCRIPT 태그

  • 스크립트 태그는 자바스크립트와 같이 클라이언트 사이드 스크립트를 정의하는 데에 사용됩니다.
  • 스크립트 태그 내부에 직접적으로 코드를 작성하거나 src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있습니s다.

STYLE 태그

  • CSS를 담는 태그입니다.

 

 

<BODY> 태그 사이에는 본격적인 내용들이 존재하게 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
    <h1>제목을 나타내는 태그 h1</h1>
    <div>
        <p>
            단락을 나타내는 태그 p 와 
            그리고 inline 태그를 감싸주는 가장 많이 쓰이는 태그 div
        </p>
    </div>
</body>
</html>
BODY영역의 구조

 

HTML5의 BODY영역안에는 위 사진과 같이 화면을 나누기 위해 시맨틱 태그를 이용합니다.

※ 시맨틱 태그란?

  • 시맨틱은 '의미의', '의미론적인'이라는 뜻입니다.
  • 즉 HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미 있는 태그를 제공합니다.
  • 일반적인 <div> 태그만 보고는 이 태그 안에 들어갈 내용의 의미를 알 수 없는데 이런 태그를 non-semantic 태그라고 합니다.
  • 반면, <header>나 <footer> 태그를 보면 이 태그 안에 들어갈 내용을 유추할 수 있습니다.
  • 예를 들면 <nav> 태그 안에는 컨텐츠를 담고 있는 문서를 서로 간에 연결할 링크들이 담겨있을 것이고 <aside>는 컨텐츠와는 별개의 내용 또는 광고가 들어갈 것이라는 것을 유추할 수 있습니다.

HTML5 이전에는 <header>가 아닌 <div id="header"><div id="head"><div id="hd"> 이런 식으로  개발자가 직접 정의할 수 있었기 때문에 여러 가지 방법들로 표현이 가능했지만 HTML5에서는 시맨틱 태그를 제공하여 HTML 태그의 의미를 명확하게 할 수 있다는 것입니다.

 

HEADER 

  • header는 주로 사이트의 가장 상단부분에 있으며 웹사이트 이름, 내비게이션, 헤드라인 그리고 검색등으로 구성된다.
  • header안에는 address태그나, footer태그, 또다른 header 태그는 둘 수 없습니다.

NAV

  • 목적지로 이동할 수 있는 링크들을 모아놓은 영역입니다.
  • ul, li, a 등의 태그들을 여전히 사용해야 합니다.

SECTION

  • 내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도입니다. (관련있는 내용들끼리 묶어줍니다)
  • 같은 성격의 내용들은 section태그에 묶어서 표시합니다.
  • 섹션은 독립적인 영역이라 섹션 내에서 header, footer 사용이 가능합니다. 이는 섹션마다 제목을 가질 수 있다는 것을 의미하며 섹션마다 h1태그를 사용할 수 있습니다.

ARTICLE

  • 게시판의 게시물, 블로그 포스트, 댓글에 담긴 콘텐츠등이 article에 해당합니다.
  • section태그가 관련있는 내용들끼리 묶어주는 역할이라면 article은 관련있는 내용들 중에서 독립적으로 구성된 글을 묶어주는 역할입니다.
  • article도 section과 마찬가지로 header와 footer를 가질 수 있습니다.

FOOTER

  • footer태그는 꼬리말을 지칭합니다. 저작권, 연락정보등 본문과 관련성은 있지만 본문에는 담기 어려운 내용을 담습니다.
  • 일반적으로 footer태그는 한 문서내에서 한번만 사용되지만, section이나 article태그내에서는 별도로 사용이 가능합니다.

 

 

HTML은 HyperText Markup Language의 약자입니다.

그리고 이는 누구나 알 것입니다.

그런데 그럼 과연 HyperText Markup Language가 무슨말인지 아시나요?

 

오늘 포스팅 할 내용은 HyperText Markup Language가 어떠한 의미를 가지고 있는지에 대하여 말씀드리려고합니다.

만약 이 내용이 필요가 없으시거나 이미 알고 계시는 내용이라면 제 블로그의 다른 글들을 봐주시면 감사하겠습니다.

 

일단 HyperText Markup Language에서 Language는 모두가 알고 있듯이 '언어' 입니다.

그리고 남은 글자인 HyperText Markup은 HyperText와 Markup으로 나눌 수 있습니다.

 

1. HyperText

 

HyperText가 어떤 말 일까요?

Hyper은 말그대로 초월의 라는 뜻을 가지고 있습니다.

그렇다면 HyperText는 초월한문서가 되겠네요.

이것을 우리는 HTML과 관련해서 생각해 본다면, 

기존의 문서가 순차적이면서 서열형 구조라면, 하이퍼텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형인 구조를 가진다. 즉, 출판된 책처럼 작가의 의도대로 사용자가 따라가는 것이 아닌, 하이퍼링크로 연결된 문서들을 어떠한 행위(클릭)에 따라 자유롭게 이동할 수 있다.

쉽게 얘기하면 HyperText는 다른 text로 이동할 수 있는 링크를 가진 text가 됩니다.

 

2. Markup

 

마크업이란 어딘가에 mark, 즉 표시해둔다는 의미입니다.

어떠한 문서가 있다면 그 문서의 제목이 어디에있는지, 내용은 어디에 있으며, 작성자는 어디에 적혀있는지

등의 문서의 많은 것들을 구조적으로 표현할 수 있습니다.

 

결국 markup은 문서를 구조적으로 표시하기 위한 것이 마크업의 개념입니다.

 

 

 

3.  HTML

위 내용들로 우리는 HyperText가 어떠한 의미를 가지고 있는지,

그리고 Markup이 어떠한 개념인지를 알게되었습니다.

그럼 이것들을 합쳐 HTML은 무엇이 될까요?

 

결국 HTML은 제목, 내용, 연락처 등 본문의 구조적 의미를 나타내는 것 뿐만 아니라,

하이퍼링크로 연결된 구조적문서를 클릭에 따라 자유롭게 이동할수 있는것을 제공하는 언어입니다.

 

 

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
알아두면 좋은 CSS 선택자  (0) 2020.08.27
[CSS] CSS 기초설명, Cascading 이란?  (0) 2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27
반응형

클로저(closure)는 지역변수를 (내부함수(inner function)안에 있는 변수) 전역변수(외부함수(outter function)처럼

살아있게끔 만들어줍니다.

내부함수가 외부함수의 맥락에 접근이 가능한것을 말하는것이죠. (Hoisting)

 

1
2
3
4
5
6
7
8
function outter() {
  var local = 'local'; // 외부함수에 변수를 선언합니다.
  function inner() { // inner()는 외부함수 안에 선언된 내부함수입니다.
    alert(name); // 외부함수에서 선언된 변수를 내부함수에서 호출합니다.
  }
 inner();
}
outter();

 

See the Pen GRgvJmJ by LeeSiHwang (@leesihwang) on CodePen.

(Run Pen 클릭 시 alert가 실행됩니다)

 

외부함수 내에서 내부함수가 선언되고 호출이 되었습니다.

이것을 실행이 되는 관점으로 보자면 

 

1. 내부함수 안에서 변수 local을 찾는다. ( scope )

2. 자신의 함수안에서 변수 local을 찾지 못하여 외부함수의 스코프에서 변수 local을 찾는다.

3. 변수 local을 찾았다 ( 내부함수가 외부함수의 변수에 접근하였다 )

위에서 말씀드렸듯이 내부함수가 외부함수의 맥락에 접근이 가능한것 입니다.

 

2. 클로저(closure)의 활용

내부함수는 외부함수의 지역변수를 참조할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있습니다. 이런것을 클로저라고 합니다..

클로저가 유용하게 사용되는 경우는 다음 예제와 같이 변경된 상태를 유지/기억 하는 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    function outterFn(){
        var inner = 0;
        var innerFn;
        innerFn = function(){ 
            console.log(inner++); 
        }
        return innerFn;
    }
    var nestFn = outterFn();
    nestFn(); // 0
    nestFn(); // 1   
    nestFn(); // 2   
    nestFn(); // 3   
    nestFn(); // 4   

 

1. outterFn 함수는 실행되고 innerFn을 반환하고 사라졌습니다.

2. innerFn 즉 내부함수는 자신이 찾았던 변수inner를 기억하는 클로저입니다.

3. 내부함수는 자신이 찾았던 변수inner를 필요로하며, 내부함수가 기억하는 Lexical환경의 변수inner는 사라지지 않고, 현 상태를 기억합니다.

4. 외부함수를 호출하면, 변수inner의 값이 변경됩니다. 

변수 inner는 클로저에의해 참조되고 있기 때문에 사라지지않고 계속 유지되며, 자신이 변경된 상태를 계속해서 유지합니다.

 

2. 클로저(closure)의 은닉화

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
<p>사과 1박스</p>
<p id="count">0</p>
<button id="plusNum">증가</button>
<button id="minusNum">감소</button>
<script>
    var privateNum = 0;
 
    function plus(){
        privateNum++;
        document.getElementById("count").innerText = privateNum;
    }
    function minus(){
        privateNum--;
        if(privateNum <= 0){
            privateNum = 0;
        }
        document.getElementById("count").innerText = privateNum;
    }
    document.getElementById("plusNum").addEventListener("click",function(){
        plus(); 
    });
    document.getElementById("minusNum").addEventListener("click",function(){
        minus(); 
    });
</script>

 

See the Pen RwNZPqr by LeeSiHwang (@leesihwang) on CodePen.

이렇게 코드를 작성한다해도 별문제없이 작동합니다.

하지만 이 코드는 addEventListener가 작동하기 이전에 count의 값이 반듯이 0이여야합니다.

변수 privateNum은 전역변수이기 때문에 언제든지 누구나 접근,변경이 쉽습니다.

변수 privateNum의 의도치않은 변경은 오류를 불러올 수 있기 때문에, 이 privateNum은

함수가 관리하는것이 좋습니다. 

 

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
<p>사과 1박스</p>
<p id="count">0</p>
<button id="plusNum">증가</button>
<button id="minusNum">감소</button>
<script>
    var plusMinus = (function(){
        var privateNum = 0;
        return{
            plus : function(){
                privateNum++;
                document.getElementById("count").innerText = privateNum;
            },
            minus : function(){
                privateNum--;
                if( privateNum <= 0 ){
                    privateNum = 0;
                }
                document.getElementById("count").innerText = privateNum;
            }
        }
    })();
 
    document.getElementById("plusNum").onclick = plusMinus.plus;
    document.getElementById("minusNum").onclick = plusMinus.minus;
</script>


  See the Pen https://codepen.io/leesihwang/pen/gObxpyL">
  gObxpyL by LeeSiHwang (https://codepen.io/leesihwang">@leesihwang)
  on https://codepen.io">CodePen.


이렇게 해결이 가능합니다.

그럼 만약에 단순히 변수 privateNum을 지역변수로 클로저 없이 사용한다면 어떻게 될까요?

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<p>사과 1박스</p>
<p id="count">0</p>
<button id="plusNum">증가</button>
<button id="minusNum">감소</button>
<script>
    function plus(){
        var privateNum = 0;
        privateNum++;
        return document.getElementById("count").innerText = privateNum; 
    }
    function minus(){
        var privateNum = 0;
        privateNum--;
        return document.getElementById("count").innerText = privateNum; 
    }
 
    document.getElementById("plusNum").addEventListener("click",function(){
        plus();  
    });
    document.getElementById("minusNum").addEventListener("click",function(){
        minus();  
    });
</script>

이렇게 코드를 작성하고 실행해봅니다.


  See the Pen https://codepen.io/leesihwang/pen/dyPzoxo">
  dyPzoxo by LeeSiHwang (https://codepen.io/leesihwang">@leesihwang)
  on https://codepen.io">CodePen.


변수 privateNum이 plus함수와 minus함수와 서로 다른 변수 privateNum으로 인식이되어 따로놀고있으며,

함수 실행 후, 클로저가 없기때문에 변수 privateNum이 유지되거나 기억되지못해 

plus버튼의 경우 0에서 1로만, minus버튼의 경우 0에서 -1로만 값이 유지되는것을 확인할 수 있습니다.

반응형

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기  (0) 2020.08.27
알아두면 좋은 CSS 선택자  (0) 2020.08.27
[CSS] CSS 기초설명, Cascading 이란?  (0) 2020.08.27
[HTML] HTML 기초설명  (0) 2020.08.27
[자바스크립트]Virtual Dom이란?  (0) 2020.08.27
반응형

 

1. document.write를 활용한 간단한 구구단 만들기

1
2
3
4
5
6
7
for( var i = 2 ;  i < 10 ; i++){ // 
    for( var j = 1; j <10 ; j++ ){
        document.write( i+"x"+j+"="+(i*j)+"</br>" );   
    }
} 
// 너무 간단함으로 설명은 생략. for문안에 for문쓰는건 왜인지
// 쓸때마다 기분이 매우 안좋다 ㅠㅠ

1 - 결과물

어렵지않게 만들 수 있는데요 지금부터 하나하나 간략하게 설명해보겠습니다.

간단하게 for문을 활용하여 이런식으로 표현이 가능합니다.

 

2. prompt를 활용해, 원하는 구구단 받아내기

 

1
2
3
4
5
6
7
8
var gugu = prompt("원하는 구구단을 입력해주세요");
if(!isNaN(gugu)){ ===> // isNaN을 통하여 숫자인지 아닌지를 판별.
    for(var i = 1; i<10; i++){ // 숫자라면 for문을 진행
        document.write(gugu+"x"+i+"="+(i*gugu)+"입니다.</br>"); // 구구단을 화면에 출력.
    }
}else{ // 숫자가 아닐경우
    alert("숫자가 아닙니다.") // alert를 통해 숫자가 아님을 전달.
}

prompt를 활용했기때문에 시작하려면 Run Pen을 눌러주세요 :)

2 - 결과물

 

 

isNan을 활용하여 숫자,문자를 파악 후 원하는 구구단을 받아낼 수 있습니다.

 

 

 

 

 

반응형

'알고리즘' 카테고리의 다른 글

[자바스크립트] 프로그래머스 124 나라의 숫자 문제 풀이  (0) 2023.03.03
[자바예제] 프로그래머스 코딩테스트 나누어떨어지는숫자배열 풀이  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 같은숫자는싫어 풀이  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 가운데글자가져오기 풀기  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 2016년문제 풀기  (0) 2020.08.27
반응형

 

프로그래머스 코딩테스트 나누어떨어지는숫자배열 링크 : 여기를 눌러주세요.

 

프로그래머스에 있는 코딩테스트 나누어떨어지는숫자배열 라는 제목의 문제입니다.

 

 

 

 

 

 

코딩테스트 나누어떨어지는숫자배열 어떻게 풀지 생각해보기

 

파라미터로 받은 배열 각각의 index값과 2번째 파라미터로 받은 divisor이 나누어떨어지는지 확인한 후, 나누어 떨어진다면 List에 넣으려고 했습니다.

 

그리고 만약에 list의 사이즈가 0이라면 나누어 떨어진 수가 없으므로

 

리턴하는 정답배열에 -1을 넣어 리턴을 해주고,

 

그게 아니라면 list를 정렬한 뒤 answer배열에 넣어주면 됩니다!

 

List정렬은 sort를 이용하였습니다.

 

크게 어려운 문제가 아닌듯하여 이정도만 말씀드려도 될 것 같습니다.

 

아래는 정답이 공개되어 있으니 혼자 풀어보고싶으신 분들은

 

지금부터 해결해 보시면 될 것같습니다.

 

 

 

 

 

코딩테스트 통과한 소스보기

 

(점수를.. 고작 또 1점을... 하아 ㅠㅠ...)

 

역시나 크게 어려운 문제가 아닌만큼 1점밖에 주질 않네요...

 

제가 어려운 문제가 아니라했지만 아직 프로그래머스의 경험이 많이 없으신분들은

 

어려울 수 있다고 생각합니다.

 

코딩은 100번 보는것 보다 1번 직접 작성하는게 더 좋으니

 

경험을 쌓으시길 바랍니다 :)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public static int[] solution(int[] arr, int divisor) {
        List<Integer> list = new ArrayList<Integer>();
        for(int i=0; i<arr.length; i++) {
            if(arr[i]%divisor==0) {
                list.add(arr[i]);
            }
        }
        list.sort(null);
        if(list.size()==0) {
            int[] answer = {-1};
            return answer;
        }
        int[] answer = new int[list.size()];
 
        for(int i=0; i<list.size(); i++) {
            answer[i]=list.get(i);
        }
        System.out.println(Arrays.toString(answer));
        return answer;
    }

역시나 제가 푼 뒤에 다른사람들이 푼 코드들을 보면 한없이 초라해집니다..

 

저 또한 그분들처럼 효율적으로 코드를 짜기위해 많은 노력이 필요할 것 같습니다.

 

(사실 이 문제푸는데도 시간이 저는 꽤 걸렸네요...)

 

모든 코드에는 정답이 없으며 저 또한 코드를 잘 짜는게 아니기 때문에

 

제 코드는 참고용으로만 사용해주시면 감사하겠습니다.

 

최대한 매일매일 1개 이상의 코딩테스트 문제를 풀려고 노력중입니다.

 

아직 많이 부족해서 포스팅이 늦을 수 있으니 양해 부탁드립니다.

 

조언이나 가르침은 항상 기쁜마음으로 받겠습니다.

 

감사합니다 (_ _)

 

반응형

'알고리즘' 카테고리의 다른 글

[자바스크립트] 프로그래머스 124 나라의 숫자 문제 풀이  (0) 2023.03.03
[자바스크립트] 자바스크립트로 구구단 만들기  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 같은숫자는싫어 풀이  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 가운데글자가져오기 풀기  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 2016년문제 풀기  (0) 2020.08.27
반응형

 

프로그래머스 코딩테스트 같은숫자는싫어 링크 : 여기를 눌러주세요.

 

프로그래머스에 있는 코딩테스트 같은숫자는싫어 라는 제목의 문제입니다.

 

 

 

 

프로그래머스 코딩테스트 JAVA 레벨 1에 있는 ‘같은숫자는싫어’ 문제입니다.

 

 

 

코딩테스트 같은숫자는싫어 어떻게 풀지 생각해보기

 

배열을받아서 같은숫자들을 제거한 뒤 남은 숫자를 리턴해주는 문제입니다.

 

일단 반복문을 돌려 배열의 index값과 그 다음 index값을 비교한 뒤,

 

같으면 넘어가고 다른숫자면 리턴해주는 배열에 넣어주고,

 

마지막 index에서는 비교할 값이 없기때문에 리턴해주는 배열에 넣어줄 수 없어

 

강제로 넣어줘야겠다고 생각했습니다.

 

하지만 마지막 인덱스값에서 다음 숫자가 없기때문에 에러가 뜹니다...

 

네... 반복문의 에러에 빠져들었었습니다 ㅠㅠ...

 

(제가 많이 부족해서... 나중에 정답을 확인해보니 for in문처럼 쓰는 방법도 있더라구요)

 

그래서 생각한게 맨 뒤에서부터 비교하는 방법이였습니다.

 

예를들면 )

 

 

1

 

이렇게 거꾸로 반복문을 돌리는 것 이였습니다.

 

아래는 정답이 공개되어 있으니 혼자 풀어보고싶으신 분들은

 

지금부터 해결해 보시면 될 것같습니다.

 

 

 

코딩테스트 통과한 소스보기

 

 

 

 

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
public class Solution {
    public static int[] solution(int[] arr) {
        
        List<Integer> preAns = new ArrayList<>();
        for(int i=arr.length-1; i>=0; i--) {
            System.out.println(i);
            if( i == 0) {
                preAns.add(arr[i]);
                break;
            }
            if(arr[i] != arr[i-1]) {
                preAns.add(arr[i]);
            }
        }
        System.out.println(preAns);
        int[] answer = new int[preAns.size()];
        int j=0;
        for(int i=preAns.size()-1; i>=0; i--) {
            answer[j] = preAns.get(i);
            j++;
        }
        return answer;
    }
}
 

뭔가 List안에 넣은뒤 다시 역순으로 answer 배열에 넣어주는게 뭔가 찝찝하긴 하지만...

 

이 방법외에 다른방법이 있다면 알려주세요 ..ㅠ ㅠ

 

모든 코드에는 정답이 없으며 저 또한 코드를 잘 짜는게 아니기 때문에

 

제 코드는 참고용으로만 사용해주시면 감사하겠습니다.

 

최대한 매일매일 1개의 코딩테스트 문제를 풀려고 노력중입니다.

 

아직 많이 부족해서 포스팅이 늦을 수 있으니 양해 부탁드립니다.

 

조언이나 가르침은 항상 기쁜마음으로 받겠습니다.

 

감사합니다 (_ _)

반응형

'알고리즘' 카테고리의 다른 글

[자바스크립트] 자바스크립트로 구구단 만들기  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 나누어떨어지는숫자배열 풀이  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 가운데글자가져오기 풀기  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 2016년문제 풀기  (0) 2020.08.27
[자바예제] 프로그래머스 코딩테스트 모의고사 문제 풀기  (0) 2020.08.27

+ Recent posts

티스토리툴바