[HTML] 웹(프론트엔드) 개발의 기초_02

2022. 5. 28. 13:08ㆍProgramming의 세계/HTML

목차

 

 

용어정리

CSS(Cascading Style Sheet)

HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어.

좀더 디자인에 최적화된 웹페이지 마크업 언어라고 볼 수 있다.  HTML4부터 따로 분리하는 것이 가능해졌고 오늘날 대부분의 웹브라우저들은 CSS를 지원하고 있다.

 

CSS와 클래스 좀더 살펴보기

 

엘리먼트(Element)

 웹디자인의 최소 단위. 쉽게 말해 html의 구성요소고 html은 이 엘리먼트들의 집합이다.

엘리먼트는 5가지의 집합으로 이뤄져 있다. => ①시작태그(속성 이름과 속성 값 포함) ②내용 ③종료태그

ex) <div>   div태그   </div>

시작태그    컨텐츠    종료태그

 

설렉터(Selector)

선택자라고 불리며, css 혹은 javascript로 변화시킬 대상을 지정할 때 부른다.

하나의 엘리먼트일수도 다수의 엘리먼트일 수도 있다.

선택할때 태그, 클래스, 네임, 아이디를 이용한다.

 

스타일 적용의 우선순위

인라인스타일 ←내부스타일시트 , 외부 스타일시트 ← 웹 브라우저 기본 스타일 

 

선택자(설렉터)의 종류

1. 전체선택자(페이지 로딩의 속도가 느려져 잘 사용 안함)

패턴 : *

ex) /*CSS*/

*{ margin: 0; text-decoration: none;}

 

2. 클래스 선택자(Class Selector)

ex) /*CSS*/

.myclass{ background: yellowgreen; color: green;}

div.myclass{background: blue; color: black;}

/*HTML*/

<p class="class1">클래스 선택자</p>

<div class="class2">클래스 선택자</div>

 

3. ID 선택자(ID Selcetor)

패턴: #myId

ex) /*CSS*/

#id1 {background: blue; color: black;}

div#id2{background:green; color: white;}

/*HTML*/

<p id="id1">ID 선택자</p>

<div id="id2">ID 선택자</div>

 

클래스(HTML)

다 같은 디자인 적용할 때 사용. 여기서 클래스는 html의 클래스로 자바의 클래스랑은 다른 개념.

여러개 생성 할 수 있다.

 

아이디(ID)

단 하나의 엘리먼트를 지징하기 때문에 하나만 지정 가능.

 

 

 

P태그/ DIV태그/ SPAN태그

<p>태그는 paragraph의 약자로 문단을 나눌때 사용하는 태그이다. 

세 태그을 적용한 내용을 보면 다음과 같다.

<!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>
</head>
<body>
    <div>div태그</div>
    <div>div태그</div>
    <!-- p태그 : 단락만들때 쓰는 태그 -->
    <p>p 태그</p>
    <p>p 태그</p>
    <!-- div태그 : 특별한 역할이 없다. 디스플래이 역할 -->
    <span>span 태그</span>
    <span>span 태그</span>
</body>
</html>

 

 

 

<div>태그는 Division의 약자로 레이아웃을 정해줄 때 사용하는 태그이다.

속성에는 style, width, height, border, backgorund-color, float, margin 등이 있다.

<!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>
</head>
<body>
<div style="background-color:greenyellow">첫번째 영역</div>
<div style="width:100px; height:50px; border:3px solid darkgoldenrod; float:right">두번째 영역</div>
<div style="width:50px; height:50px; border:1px solid darkblue; background-color:darkcyan">세번째 영역</div>
<div style="width:30; height:30px background-color:green; float:left; margin:20px;">네번째 영역</div>
<div style="width:100px; height:100px; background-color:palevioletred">다섯번째 영역</div>
</body>
</html>

 

*span과 div의 차이점*

p태그를 적용한 문장은 문단이 나눠진 것이 가시적으로 눈에 보인다. 하지만 div태그와 span 태그는 별다른 변화가 보이지 않는다. 다만 span태그는 줄바꿈이 안되고 div는 줄바꿈이 된 것을 확인할 수 있다. span은 inline을 지정해주고, div는 block을 지정해준다. 이들은 단독으로는 특별한 기능이 없지만 보통 CSS와 함께 쓰인다.

<!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>
</head>
<body>
<div style="background-color:greenyellow">div1 영역</div>
<div style="background-color:rosybrown">div2 영역</div>
<span style="background-color:blue">span1 영역</span>
<span style="background-color:purple">span2 영역</span>
</body>
</html>

(차이가 보이시나요??) 네~~

 

미디어태그

비디오

autoplay하면 자동재생 설정할 수 있다. muted를 넣으면 음소거된다.

<div>
        <video src="비디오주소" poster"포스터이름.확장자" controls muted autoplay width="크기 및 비율"></video>
    <!-- autoplay 넣으면 자동 재생 -->
    <!-- chromium browers에서는 오토플레이를 지원하지 않는다. : 돈 문제 때문에 사용자가 플레이를 할 수 있게 권한을 주게끔 되어있음, 하지만 muted autoplay는 허용됨 -->
    <!-- controls autoplay -->
    </div>

 

 

오디오

비디오와 구성이 거의 같다. autoplay, controls, loop, muted 속성도 갖고 있다.

volume이 있어서 0.0~1.0까지 소리 크기를 지정할 수 있다.

<body>
    <audio src="오디오주소" controls autoplay muted></audio>
    <!-- autoplay muted 의미 없지만 가능하다 -->
    <!-- hidden 하면 안보이고 실행 muted autoplay hidden 이면 데이터만 긁어먹기때문에 굳이 사용 안함 -->
</body>

 

아이프레임

비디오나 오디오를 제외한 다른 것들을 넣을 때 사용. 주로 다른 html 파일 넣을때 사용한다. 유투브는 iframe을 통해서 동영상 넣게 되어 있다.

유투브 영상->공유에 iframe 태그를 쉽게 구할 수 있다.

 

 

CSS와 클래스

CSS스타일 적용 방법
1. 인라인 스타일(Inline style)

2. 내부 스타일 시트(Internal style sheet)

3. 외부 스타일 시트(External style sheet) : 외부 스타일 시트를 이용한 방법으로 한문서 뿐만아니라 여러 문에서 동시 적용이 가능해져 반복작업을 피하면서도 통일성있게 스타일 구현이 가능하다.(추천)

 

 

 

1. 인라인 스타일(Inline style)

<!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>
</head>
<body>
    <h1>CSS 연습</h1>
<!-- 1번. 인라인 방식 : 비추. 쓰지 말것 -->
    <div style="background-color: red;">
    인라인  CSS
</div>
</body>
</html>

이 방식은 추천하지 않는다.

2. 내부 스타일 시트(Internal style sheet)

<!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>
</head>
<!-- 안겹치면 덮어버리고 겹치면 달아버리는 형식. 그래서 외부 선언방식이 가장 이상적인 방법 -->
<body>
    <style>
    /* 내부선언 방식 */
    div {
            width: 100px;
            background-color: yellow;
            font-size: 30px;
     }</style>
    <div>내부선언방식</div>
    </body>
</html>

3. 외부 스타일 시트(External style sheet) 추천

 스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여 스타일이 적용

 ex) <link rel="stylesheet" href="style.css">
 
<!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="style.css">
</head>
<body>
    <!-- div 클래스에 지정한 스타일이 반영된다. background-color: aqua; height: 300px -->
    <div>
        div
    </div>
    <!-- p 클래스에 지정한 스타일이 반영된다. color: blue -->
    <p>
        p태그
    </p>
      <!-- p 클래스에 지정한 스타일이 반영된다. color: blue -->
    <span class="red-text">span태그</span>
</body>
</html>

 

style.css파일은 다음과 같다.

div{
    background-color: aqua;
    height: 300px;
}
body{
    font-family: 'IBM Plex Sans KR', sans-serif;
    background-color: black;
}
p{
    color: blue;
}
.red-text{
 color: red;
}

 

외부스타일시트 적용한 결과 페이지

 

 

 

 

애플 홈페이지 상단만 어렴풋하게 닮아보기

아이~ 이쁘다.

이쁘고 세련된 애플 홈페이지다.

오늘 정리한 태그와 클래스를 활용하여서도 충분히 애플 홈페이지를 구현해 볼 수 있다.

 

 

 

.............

 

일단 태그만 구현해볼 수 있다.

 

 

 

1.이쁜 글씨체 퍼오기

구글 폰트(www.fonts.google.com)에 들어가 원하는 한글체 link를 퍼와 html <head>에 붙여준다.

 

<!-- 구글 폰트에서 글씨 끌어오기 -->
<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=IBM+Plex+Sans+KR:wght@200;300;400&display=swap" rel="stylesheet">

 

 

 

2. 클래스 만들기

 

 

 

 

 

 

 

 

색상표를 참고하여 폰트 및 배경색의 HEX코드를 CSS에 작성해준다.

 

<<CSS 클래스 작성>>

a:hover {
    color: white;
    transition: 1s;
}

a{
    text-decoration: none;
    color: #C8C8C8;
}

.background{
    background-color: #313132;
    padding: 1px;
}


.white_font{
    color: #D5D5D5;
   }

 

 <<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="style2.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=IBM+Plex+Sans+KR:wght@200;300;400&display=swap" rel="stylesheet">

</head>
<body>
<div class = "background white_font">
<table cellpadding="10px">
    <tr >
        <td align="center" width =100>
            <img src="apples.png" alt="applehone" width="20">
        </td >
        <td  align="center" width =80><a href="#">스토어</a></td>
        <td  align="center" width =80><a href="#">MAC</a></td>
        <td  align="center" width =80><a href="#">iPad</a></td>
    </tr>
</table>
</div>
</body>
</html>

 

<<Result>>

 

 

오~~~~~그럴싸한데???

 

 

근데, 짝꿍님이 보시더니 테이블보단 리스트 쓰는게 더 나을거라고 피드백줬다...

 

w3schools.com의 훌륭한 예시를 참고하여 나의 코드와 비교해보기.

W3Schools Online Web Tutorials

 

W3Schools Free Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

이곳에는 HTML, JavsScript, Server, 데이터분석과 관련된 각종 정보와 Tutorials를 담고 있어, 잘몰랐던 코드를 알고 그것을 어떻게 활용하는지 배우기 매우 좋다.

확인!!!

 

Horizontal List with CSS → Try it yourself를 클릭하면 다음과 같이 예시와 함께 예시를 적용했을 때의 출력 화면을 보여준다.

 

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

다음과 같이 리스트를 넣는 것을 확인 할 수 있었다.

아 ...4행 테이블을 만드는 것이 아니라 4개항목의 리스트를 만들어서 메뉴바를 형성하는구나.

코딩에 답이 있는 것은 아니지만 나의 경우는 다음 기회에는 li를 좀더 적극적으로 활용해보려 한다.

그럼 3회차에서 봐요~

 

'Programming의 세계 > HTML' 카테고리의 다른 글

[JSP] JSP 짧고 굵게 배워보기(환경 구축 및 구동 확인)  (0) 2022.06.08
[CSS] 초간단 프론트엔드 화면 구성  (0) 2022.05.30
[CSS] div 정렬 vs table 정렬  (0) 2022.05.30
[CSS] display, border의 이해와 속성, 예시  (0) 2022.05.30
[HTML] 웹(프론트엔드) 개발의 기초_01  (0) 2022.05.27

관련글

티스토리툴바