JavaScript & CSS & HTML

[인강] HTML, CSS 기초

Rosie_dev 2020. 12. 9. 16:57

| 의사코드 HTML, CSS, JS  ---  W3C 웹표준

 Cross browsing 동일한 사용자경험

 웹접근성, 정보통신기기

 

 웹개발 에디터 > VS code 기본 작성시, !+tab키

 

 오픈소스와 라이센스 opensourcing.org

 

| <img src="" alt=""/>  --------------  empty tag, self closing tag

                 대체택스트 필요

 

  부모요소와 자식요소

 

  < meta charset="USF-8"> 문자인코딩 방식

   기타 모든 정보

 

  DTD Document type definition <! DOCTYPE html> HTML5

 

  <link rel="stylesheet" href="./css/main.css">

  <link rel="icon" href=".favicon.png">

 

  CSS  -----  <link>                   외부

                <style></style>        embeded 방식

  JS  -----  <script></script>

 

 

| CSS

  선택자 selector  --------  태그이름  or 클래스 .main-text(별명)

  margin

  padding (시계방향, 위아래 좌우) 요소내부여백

 

  상대경로 / 절대경로("./")

  단축속성 / 개별속성

 

  <div style="color:red;"> 안녕하세요 </div>   인라인방식

 

| reset.css 초기화

 defould value 기본값

 

 margin: auto;  중앙으로

 

 .clear fix :: after {

        content: "";

        display: block;

        clear: both;

  }

 

| <!DOCTYPE html>

  <html lang="ko">

  <head>

      <meta charset="UTF-8"> /문자열인식자/

      <title>GitHub</title>

      <link rel="stylesheet" href="./main.css"> /css와 연결하는 링크/  

  </head>

  <body>

    <div class="header">

          <div class="container clearfix"> /clearfix 사용법/

                <div class="container-left clearfix">

                <div class="logo clearfix">

                    <img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub logo">

                </div>

                <div class="menu clearfix">

                    <div class="menu-item">Personal</div>

                    <div class="menu-item">OpenSource</div>

                    <div class="menu-item">Business</div>

                    <div class="menu-item">Explore</div>

                </div>

              </div>

          </div>

      </div>

    

  </body>

  </html>

 

body {

    margin: 0;

    padding: 0; /기본 브라우저 초기화/

}

.header {

        background: white;

        border-bottom: 1px solid lightgray;

}

.container {

    width: 980px;

    margin: auto;

}

.container-left {

    padding-top: 20px;

    padding-bottom: 20px;

}

.logo {

    float: left;

    margin-right: 5px;

}

.logo img {

    display: block; /이미지 블록값 제어 필요/

}

.menu {

    float: left;

}

.menu-item {

    float: left;

    padding: 8px 10px; /padding 8px는 위아래, 10px는 왼쪽오른쪽/

}

.clearfix::after { /clearfix 사용법/

    content: "";

    display: block;

    clear: both;

}

 

| HTML - 블록레벨 요소와 인라인 요소

 

  블록요소

  1. DIV, H1, P

  2. 사용 가능한 최대 가로 너비를 사용한다

  3. 크기를 지정할 수 있다

  4. (width: 100%; height: 0; 로 시작)

  5. 수직으로 시작

  6. margin, paddding 위, 아래, 좌, 우 사용이 가능

  7. 레이아웃

 

  인라인 요소

  1. SPAN, IMG

  2. 필요한 만큼의 너비를 사용한다

  3. 크기를 지정할 수 없다

  4. (width: 0;, height: 0; 로 시작)

  5. 수평으로 쌓임

  6. margin, padding 위, 아래는 사용을 할 수 없다

  7. 텍스트

 

<!doctype html> <!-- /html 5버전으로/ -->

<html lang="ko">

    <head>

        <META charset="UTF-8"> <!-- /문자인코딩방식/ -->

        <title>HTML 요소 레퍼런스</title>

        <base href="https://heropcode.github.io/GitHub-Responsive/">  
        <!-- /기준으로 한 번만 작성할 수 있는 테그/ -->

        <meta name="author" content="Sally">

        <meta name="description" content="Sally의 사이트 입니다!">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <link rel="stylesheet" href="./css/main.css">

        <style type="text/css"> /* /style 기본적으로 head 안에 작성할 것/ */

            div {

                color: red;

                back: blue;

            }

        </style>

        <!-- /문서의 정보/문서의 제목, 기타 정보(metatag), 스타일 외부에서 가져와서 연결/ -->

    </head>

    <body>

        <img src="img/bg.jpg" alt="샘플">

        <img src="img/feature-tile__build.png" alt="샘플2">

    </body>

</html>

 

<!-- EUK-KR: 완성형 한글 깨지는 현상, UTF-8: 조합형 -->

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    

</body>

</html>

'JavaScript & CSS & HTML' 카테고리의 다른 글

[JS] owl carousel 문제 해결하기  (0) 2021.09.29
[JS] 모달창 이슈 해결하기  (0) 2021.09.27
[Jquery] 내가 보려고 만든 기초 핵심 내용정리  (0) 2021.05.16
[Java Script] 내가 보려고 만든 기초 핵심 내용정리  (0) 2021.04.13
[HTML/CSS] 내가 보려고 만든 기초 핵심 내용정리  (0) 2021.03.30
댓글