0.HTML/CSS

2022. 8. 16. 17:01ㆍ프론트엔드

2022.08.17.화

1.HTML(Hyper Text Markup Language)

 -hypertext, hyperlink : 정보(데이터)들이 텍스트, 이미지 등의 형태를 통해 서로 링크로 연결되어 화면

                       이동(서핑)을 편리하게 해주는 고리(기능). 하이퍼 링크와 유사한 의미로 혼용되어 사용됨

 -Markup Language : 웹 상(Internet Browser)에서 보여질 문서를 작성하기 위해 일정한 규칙과

                                  문법으로 구성된 프로그래밍 기술 스택 or 언어

//html

<!DOCTYPE html>
<html lang="en">

<head><!-- 해당 html페이지의 메타(meta) 정보 -->
    <meta charset="UTF-8"><!-- charset attribute는 UTF-8형식의 인코딩 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Places To Visit Post-Pandemic</title>
</head>

<body>
    <!-- <div class="article"></div> == <article></article> -->
    <article><!-- semantic(의미론적인 ) tag 태그들을 의미단위로 구분(SEO)-->
        <!-- <header>, <footer> .. 등등 <main> -->
        <h1>Best Places To Visit Post-Pandemic</h1>
        Author : Frog, Fox<br>
        Date : Jun 3, 2021, 4:40am

        <!-- 문단 태그 -->
        <p>More people are being vaccinated everyday and travel is already top of mind.</p>
        <p>Suddenly, the whole world feels in reach again, even if travel restrictions haven’t quite been lifted yet.
        </p>

        <h2>Alentejo, Portugal</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat neque eveniet aut, saepe unde corporis?</p>
        <img src="/images/Alentejo_Portugal.jpg" alt="밝은 대낮에 하얀 건물들이 모여있는 포르투갈의 한 마을 이미지"
            style="width: 480px; height:270px">
        <p>Travel information</p>
        <!-- unordered list 태그-->
        <ul>
            <!-- ul>li*3{text} VSCode Emmet 기능-->
            <li>Temperature</li>
            <li>Heat_rating</li>
            <li>water_color</li>
        </ul>
        <a href="https://en.wikipedia.org/wiki/Alta,_Norway">More information</a>
    </article>
    <footer><!-- semantic 태그 -->
        <p>2021 Forbes Media LLC. All Rights Reserved.</p>
    </footer>
</body>

</html>

2.CSS(Cascading Style Sheets)

 1)Inline_Internal_External

//html

<!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>Cascading Style Sheets</title>
    <!-- 2.internal style: <head> 내에 <style>내부에 작성하는 방법 -->
    <style>
        .internal {
            color : crimson;
            font-size: 40px;
        }
    </style>
    <!-- 3.External style : 별도의 css파일로 html과 css를 서로 분리하여 적용하는 방식 -->
    <!-- href : hyper reference -->
    <link rel="stylesheet" href="in_line_internal_external.css">
</head>
<body>
    <h1>CSS 스타일 적용 방식(CSS Styling)</h1>
    <hr>
    <!-- inline style : style attribute 내에 작성하는 방법 -->
    <p style="color : teal; font-size : 30px">Inline Style로 적용된  CSS</p>
    <p class="internal">Internal Style로 적용된 CSS</p>
    <p class="external">External Style로 적용된 CSS</p>
</body>
</html>
//css
.external{
    color : mediumpurple;
    font-size: 40px;
}

 2)selector

//html
<!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="simple_selectors.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
</head>
<body>
    <h1>CSS 기본 선택지(CSS Selectors)</h1>
    <hr>

    <h2>1.전체 선택자(*, Universal Selector) - 전체 폰트 적용</h2>

    <h2>2.타입 셀렉터(Type Selector), 해당 타입(태그명, 태그의 이름)은 적부 적용됨</h2>
    <hr>

    <p class="class-selector">3.클래스 선택자(Class Selector), 기호는 .(Dot) attribute로 class를 씀</p>

    <p class="class-selector">Class Selector 텍스트</p>

    <p class="class-selector">Class Selector 텍스트는 중복 적용 됨</p>

    <p id="id-selector">아이디 선택자(Id Selector), 기호는 #(hashtag) attribute로 id를 씀</p>

    <p id="id-selector">Id 선택자도 중복 적용은 되지만(문법적으로), <u>한번만 사용을 권장</u></p>
</body>
</html>
//css

/* 전체 선택자 */
*{
    font-family: 'Playfair Display', serif;
}
/* 타입 셀렉터(태그 선택자) */
h2{
    color:slateblue
}
/* 클래스 선택자 */
.class-selector{
    font-size: 30px;
    border: 2px dashed firebrick;
}

#id-selector{
    font-size: 30px;
    font-style: italic;
    color: blueviolet;
}

 3)Inheritance

//html

<!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="inheritance.css">
</head>
<body>
    <h1>CSS 상속(CSS Inheritance)</h1>
    <hr>

    <h2>상속되는 속성 : 주로 font와 관련된 속성들이 상속됨(font-size, color, text-align 등)</h2>
    <div class="disney">
        <div class="mickey">미키마우스</div>
        <div class="mini">미니마우스</div>
        <div class="donald">도날드덕</div>
    </div>

    <h2>상속되지 않는 속성 ex)border</h2>
    <p>이 문단 내부에는 <em>강조된 텍스트</em>가 있습니다.</p>

    <h2>강제 상속 : inherit</h2>

    <div id="sidebar">
        <h3>sidebar text</h3>
    </div>

</body>
</html>
//css

.disney{/* 상속되었기 때문에 disney캐릭터들이 동일한 스타일이 적용됨 */
    color:firebrick;
}

p{/* <em> 내부에 강조된 텍스트도 상속되어야하는데 되지 않음 */
    border:dashed 2px;
}

h3{
    color:green;
}

#sidebar{
    color:blue;
}

#sidebar h3{/* #sidebar라는 id태그 내부에 있는 h3태그만 가리킴 */
    color: inherit;
}

'프론트엔드' 카테고리의 다른 글

4.React CSS  (0) 2022.09.07
3.React  (0) 2022.09.06
2.React  (0) 2022.09.05
1.CSS  (0) 2022.08.17

관련글

티스토리툴바