Button / Image / pre / CSS 그룹화 , id 적용

2021. 3. 2. 21:20

HTML

HTML : 웹과 관련된 마크업언어
HTML4까지 <div></div>를 이용해서 구조를 잡았지만 HTML5 시멘틱태그가 생겼다.
구성을 식별하기위한 표준방식이 생김.
시멘틱태그 : <header>, <main>,<footer>
header,main,footer안에 <Section><h1>을 이용해서 아웃라인을 잡아줄수있고 넘버링을 편리하게 할수있다.
<ul><li> :순서가 필요없는 목록
<ol><li>: 순서가 있는 목록
섹션태그 : <article>,<aside>,<nav>

블록태그 : 구조만들기에 사용

인라인태그 : 블록안에서 콘텐츠를 마크업하는 태그

Button Elements

<input type="button" value="Button Test">

일반 버튼타입 태그

<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg>
   Button Test
</button>

<button></button>좀더 다양하게 꾸며줄수있는 버튼태그

Image

<img src="../images/logo.png"alt ="뉴렉처 온라인">

이미지 태그사용시 어떤 이미지인지 설명넣을것

<pre>

<pre>
		int i = 1;
		int j = 2;
</pre>

쓰여진그대로 출력하는 태그. 코드소스출력시 유용

<code></code>는 한줄만 2줄 이상 일경우 <pre>로 감싸주기.

키보드태그

<kbd>Shift</kbd> + <kbd>Tab</kbd>

브라우저별로 적용되는 태그가달라 적용효과가 다르다.

<b>,<strong> 등 쓰지않는 태그들이있다. 이것들은 what인지가 아니라 how를 나타내고있다. 요즘은 CSS가 스타일을 대신하므로 사용하지않는다.

지수표현

                int i<sup>2</sup> = 0;
                int j = 1;

CSS

메뉴하나에만 스타일 적용했을경우

<h1 style="color:blue;font-size:20px;">메인메뉴</h1>

특정부분에만 공통적으로 스타일을 적용하고싶다면?

<head> 부분에 <style></style>을 넣고 id, 그룹명 또는 클래스를 넣어준다.

<!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>
    <style>
        .redsun{
            color: red;
        }

        #h1{
            color: pink;
        }
    </style>
</head>

.클래스명 { }
#id명 { }
h1 { } : h1만 넣으면 h1로 잡힌 태그를 찾는다.

id 명 지정하기

<header id="h1">

클래스 지정하기

<h1 class="redsun">메인메뉴</h1>

id가 부여된곳에 스타일을 적용할뿐만 아니라, id이름으로 구역을 찾을수도있다. (id명이 aside인경우 .html#aside로 들어가면 아래와같이 출력)

실습

.greenclass로 그룹화해서 초록색 적용
h1라는 아이디 생성해서 h1에 핑크적용 (header영역에 모두적용됨)
아이디 aside에 보라색적용

<!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>
    <style>
        .greenclass{
            color: rgb(26, 126, 47);
        }

        #h1{
            color: pink;
        }
        #aside{
            color:blueviolet
        }
    </style>
</head>
<body>

    <header id="h1">
        <h1><img src="../images/logo.png"alt ="뉴렉처 온라인"></h1>
        <section>
            <h1>헤더</h1> 

            <nav>
                <h1 class="greenclass">메인메뉴</h1>
                <ul>
                    <li><a class="greenclass" href="">학습가이드</a></li>
                    <li><a href="">강좌선택</a></li>
                    <li><a href="">AnswerIs</a></li>
                </ul>
            </nav>

            <section>
                <h1>강좌검색폼</h1>
                <form>
                과정검색
                </form>
            </section>
            
            <nav>
                <h1>회원메뉴</h1>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="../member/login.html">로그인</a></li>
                    <li><a href="">회원가입</a></li>
                </ul>
            </nav>
            
            <nav>
                <h1>고객센터메뉴</h1>
                <ul>
                    <li>마이페이지</li>
                    <li>고객센터</li>
                </ul>
            </nav>
        </section>
    </header>    


    <section id="aside">
        <h1>고객센터</h1>
        <div></div>
        <nav>                
            <h1>고객센터메뉴</h1>
            <ul>
                <li><a href="list.html">공지사항</a></li>
                <li>자주하는 질문</li>
                <li>수강문의</li>
                <li>이벤트</li>
            </ul>   
        </nav>

        <nav>
            <h1>협력업체</h1>
            <ul>
                <li>노트펍스</li>
                <li>나무랩연구소</li>
            </ul>
        </nav>                 
    </section>



    <main>
        <section>
            <h1>공지사항</h1>

            <section>
                <h1>경로</h1>
                <ol>
                <li>home</li>
                <li>고객센터공지사항</li>    
                <li> 제목</li>    
                </ol>
            </section>
           


        <section>
            <H1>공지사항 목록</H1>
            <table>
                <tr>
                    <td>1024</td>
                    <td>스프링 MVC 소스코드</td>
                    <td>newlec</td>
                    <td>2020-12-12</td>
                    <td>1352</td>
                </tr>
                <tr>
                    <td>1023</td>
                    <td>스프링 JSON 출력을 위한 라이브러리 설정</td>
                    <td></td>
                    <td>2020-11-29</td>
                    <td>994</td>
                </tr>
                <tr>
                    <td>1022</td>
                    <td>스프링 강좌 <kbd>Ctrl</kbd>+<kbd>shit</kbd>RestController 한글 깨짐 설정 코드</td>
                    <td>newlec</td>
                    <td>2020-11-25</td>
                    <td>802</td>
                </tr>
            </table>
        </section>

        <section>
            <h1>현재 페이지 정보</h1>
            <div> 1 / 2 pages
            </div>
        </section>

        <nav>
            <h1>페이저</h1>
            <div>이전</div>   
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <div>다음</div>
        </nav>    

     
                int i<sup>2</sup> = 0;
                int j = 1;

        <div>
            <input type="button" value="Button Test">
                    </div>

    </section>
</main>



    <footer>
        회사정보
        Copyright ⓒ newlecture.com 2012-2014 All Right Reserved. Contact admin@newlecture.com for more information
    </footer>
</body>
</html>

'2021 Newlecture > HTML & CSS' 카테고리의 다른 글

블록태그와 인라인태그 / flex (0)	2021.03.09
em 과 rem / height : inherit (0)	2021.03.09
Block 레이아웃 / overflow / 값 할당 단위 (0)	2021.03.08
CSS / 선택자 / 연산자 / 엘리먼트 우선순위 (0)	2021.03.03
Section, 지역화, 블록태그, 인라인태그, 테이블태그 (0)	2021.02.26
시멘틱태그 (0)	2021.02.26
상대경로와 절대경로 차이 /크롬 확장프로그램/ HTML 문서구조 (0)	2021.02.23
파일구조 준비 / Visual Studio 환경변수 설정 (0)	2021.02.22

HaileyKim