코딩 기록들

[FrontEnd] 7. Text decoration, Box align, Pseudo class & Pseudo element 본문

FrontEnd Programming

[FrontEnd] 7. Text decoration, Box align, Pseudo class & Pseudo element

코딩펭귄 2024. 3. 7. 17:13

Text decoration

- 텍스트의 색상이나 밑줄, 굵기, 크기 등을 처리할 수 있음

- 이름으로 쓰는 단색 ex)red, blue 은 안씀

- 색을 만들어서 쓴다 : red = rgb(255, 0, 0); or #FF0000; 

  -- 이때, #FF0000 의 경우 2자리단위로 같은게 2개씩 있으면  하나로 줄여도 됨-> #F00

  • color - 텍스트의 색상 변경
  • text-decpration - 텍스트에 밑줄그음
  • font-weight - 텍스트의 굵기 조절(100~900범위의 숫자, bold 등 쓸수 있음)
  • font-size - 텍스트의 크기 변경

* font-size를 %, em, rem 등으로 지정할 경우, 브라우저의 기본 텍스트 크기를 기준으로 계산 *

- Edge: 설정 -> 브라우저 디스플레이 -> 글꼴 -> 글꼴 사용자 지정

- Chrome: 설정 -> 모양 -> 글꼴 맞춤설정

- 100% : 브라우저가 관리하는 정 크기

body{
    background-color: #888888;
}


div{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid gray;
}
.red{
    background-color: rgb(255, 0, 0);
}
.green{
    background-color: rgb(0, 255, 0);
}
.blue{
    background-color: rgb(0, 0, 255);
}
.black{
    background-color: rgb(0, 0, 0);
}
.white{
    background-color: rgb(255, 255, 255);
}
.yellow{
    background-color: rgb(255, 255, 0);
}
.gray{
    background-color: rgb(126, 126, 126);
}


/*16진수
0 1 2 3 4 5 6 7 8 9  a  b  c  d  e  f 
10진수로 변환되면?
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
-hex code로 컬러 표시할때-
앞의 두자리 : red 영역
중간두자리 : green 영역
마지막두자리 : blue영역
*/
.hex-red{
    background-color: #FF0000;
}
.hex-green{
    background-color: #00FF00;
}
.hex-blue{
    background-color: #0000FF;
}
.hex-black{
    background-color: #000000;
}
.hex-white{
    background-color: #FFFFFF;
}
.hex-yellow{
    background-color: #FFFF00;
}
.hex-gray{
    background-color: #888888;
}


/*red green blue alpha : alpha 가 추가됨. 투명도를 결정하는 속성
0 : 완번투명 / 1 : 완전 불투명 (0부터 1까지의 값)*/
.transparent-red{
    background-color: rgba(255, 0, 0, 0.5);
}
.transparent-green{
    background-color: rgba(0, 255, 0, 0.5);
}
.transparent-blue{
    background-color: rgba(0, 0, 255, 0.5);
}
.transparent-black{
    background-color: rgba(0, 0, 0, 1);
}
.transparent-white{
    background-color: rgba(255, 255, 255, 1);
}
.transparent-yellow{
    background-color: rgba(255, 255, 0, 0);
}
.transparent-gray{
    background-color: rgba(126, 126, 126, 0);
}


/*#red green blue alpha : alpha 가 추가됨. 투명도를 결정하는 속성
00 : 완전투명 / 11 : 완전 불투명 (0부터 1까지의 값)*/
.hex-transparent-red{
    background-color: #FF000033;
}
.hex-transparent-green{
    background-color: #00FF0033;
}
.hex-transparent-blue{
    background-color: #0000FF33;
}
.hex-transparent-black{
    background-color: #00000033;
}
.hex-transparent-white{
    background-color: #FFFFFF33;
}
.hex-transparent-yellow{
    background-color: #FFFF0033;
}
.hex-transparent-gray{
    background-color: #88888833;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB 실습</title>
    <link rel="stylesheet" href="./styles/color.css">
</head>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="yellow"></div>
    <div class="gray"></div>

    <hr />

    <div class="hex-red"></div>
    <div class="hex-green"></div>
    <div class="hex-blue"></div>
    <div class="hex-black"></div>
    <div class="hex-white"></div>
    <div class="hex-yellow"></div>
    <div class="hex-gray"></div>

    <hr />

    <div class="transparent-red"></div>
    <div class="transparent-green"></div>
    <div class="transparent-blue"></div>
    <div class="transparent-black"></div>
    <div class="transparent-white"></div>
    <div class="transparent-yellow"></div>
    <div class="transparent-gray"></div>

    <hr />

    <div class="hex-transparent-red"></div>
    <div class="hex-transparent-green"></div>
    <div class="hex-transparent-blue"></div>
    <div class="hex-transparent-black"></div>
    <div class="hex-transparent-white"></div>
    <div class="hex-transparent-yellow"></div>
    <div class="hex-transparent-gray"></div>
<body>
    
</body>
</html>

 

 

 

 

box align (정렬)

text align

- 수평 정렬

- 수정하고싶은 인라인 (자식)엘리먼트가 있다면, 해당 엘리먼트의 부모 엘리먼트에 적용 

- text align : left, center, right

- 한개를 주면 모든 아이템들이 적용됨

vertical align

- 수직정렬

- 정렬하기를 원하는 '자식 엘리먼트', 즉 수직정렬을 할 '대상' 에 적용

- verticle-align : top, middle, bottom

- 비교하는 대상이 있어야 정렬이 됨 -> 1개요소가 들어있는 박스에 verticle align 하면 정렬 안됨. 여러개 요소가 들어있는 박스에 vertical align해야 정렬이 정상적으로 된다

- 한 박스 내에서 2개의 정렬을 동시에 수행할 수 없다

 

 

Pseudo class

수도클래스 - 자주사용하는 색인 ('상태' 를 제어)
:active 무언가를 클릭하고있을때 ~ 해라
:checked 박스를 선택했을때의 상태
:disabled 버튼, 입력필드가 비활성화처리될때 스타일을 정의해라
:first-child  같은 div가 있을때 같은 div들 중 첫번째div를 가져와서 ~해라
:last-child  같은 div가 있을때 같은 div들 중 마지막div를 가져와서 ~해라
:focus ~를 선택한 상태
:hover 마우스를 올리면 ~해라
:invalid_(en_US) form element와 관련있음. 잘 안씀
:link A앵커태그에 하이퍼링크가 달려있으면 ~해라
:nth-child() 여러개의 div, li가 있을때, nth-child(2n) = 짝수꺼마다 ~해라
:read-only  읽기전용일때 ~해라
:required 필수입력값일때 ~해라
:valid ~이런저런 룰들을 다 지켰다면 ~해라
:visited 방문한적이 있다면 ~해라

 

<h3 class="content-article-title">
    <a href="./details.html">한국인의 삼겹살사랑에 놀란 루마니아 마트사장님</a>
    <span class="content-article-title-reply-count">[23]</span>
</h3>
/* 링크스타일을 변경 */
a:link{
    color: #333333;
    text-decoration: none;
}

/* 방문한적이 있는 링크스타일 변경 */
a:visited{
    color: #0000FF;
}

/* 링크를 클릭할때의 스타일 변경 */
a:active{
    color: #FF0000;
}

/* 링크에 마우스를 올렸을때 스타일 변경 */
a:hover{
    font-weight: bold;
}

결과)

 

 

 

 

Pseudo element

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

- 콜론을 2개 찍고, 대상을 적어줌

- 상태가 아닌 위치와 값

- Block 엘리먼트에서만 사용할 수 있음

::after (= :after)  
::before (= :before)  
::backdrop (dialog쓸때 사용) dialog쓸때 사용
::selection  색 제어시 사용

*after, before이 제일 많이 쓰임*

- 항상 {} 안에 'content' 작성함 

- 선택이 안되는것들. 그저 content=" " 안에 넣어주는 '값'

- ctrl + a 눌러도 텍스트나 이미지로서 선택이 안됨 

::after, ::before 사용예시
<div class="content">
    <div class="content-article">
        <h3 class="content-article-title">
            <a href="./details.html">한국인의 삼겹살사랑에 놀란 루마니아 마트사장님</a>
            <span class="content-article-title-reply-count">[23]</span>
        </h3>
        <ul class = "content-article-author-info-list">
            <li class="content-article-author">개드립</li>
            <li class="content-article-number">No.23456</li>
            <li class="content-article-create-date">08:03</li>
        </ul>
    </div>
</div>
/* author인 글쓴이 다음에 회색 파이프(|)가 보일것 */
.content-article-author::after {
    content: "|";
    padding-left: 10px;
    color: #DDDDDD;
}

/* date이전에 빨간색 파이프(|)가 보일것 */
.content-article-create-date::before {
    content: "|";
    padding-right : 10px;
    color: #DDDDDD;;
}

 

결과)

 

 

 

 

 

 

 

 

 

'FrontEnd Programming' 카테고리의 다른 글

[FrontEnd] 8. !important, Outline, Floating dom, z-index, Overflow  (2) 2024.03.08
[FrontEnd] 9. Position, Background  (3) 2024.03.08
[FrontEnd] 6. Margin collapsing, Width & Height, Display & Visibility  (1) 2024.03.07
[FrontEnd] 5. CSS  (3) 2024.03.06
[FrontEnd] 4. HTML 공통 Attributes, 공통Event  (0) 2024.03.06
'FrontEnd Programming' Related Articles more