웹개발 기초/html_css

img, a 태그,

미미_밍 2024. 2. 12. 13:17

 

프론트엔드 개발자 공부

1. Basic Tools => 개발하기 위해 필요한 툴

      사용하는 방법 등 익숙하게 사용할 수 있도록 익혀나갈것

 

2. Front-end => 개발을 위한 실질적으로 필요한 지식을 배워나가는 단계

   => 2가지를 통해 원하는 사이트, 어플리케이션을 만들었다면

      배포하기

 

3. publish => 내가 만든 어플리케이션을 어떻게 어디에 배포하면 좋을지 알아가는 것

 

개발 툴 => 컴퓨터가 필요(컴퓨터 운영체제 CS)

코드를 작성할 text editor => vs code, intellij

브라우저 => 브라우저 이해

터미널 => (리눅스 서버)

 

웹표준(html, css, javascript)

 

 

0.

HTML(Hyper Text MarkUp Language)

   웹 문서를 만드는 언어

   하이퍼 텍스트 : 문서를 서로 연결해주는 링크를 의미

   마크업 : 표시한다

 

1) HTML 구조

   <!DOCTYPE html>

   <html>

      <head>

         <title></title>

      </head>

      <body>

      </body>

   </html>

 

 

2) 태그의 기본구조

   

   <시작태그 속성1="속성값1" 속성2="속성값2",..>내용</종료태그>

   

- 태그(Tag)

   <>로 표시한다

   일반적으로 <시작태그></종료태그> 한쌍으로 사용된다

   

- 내용(Content)

   시작태그와 종료태그 사이에 있는 내용

 

- 엘리먼트(element)

   태그 + 내용

 

- 속성(attribute)과 속성값(value)

   태그 <> 안에 있는 일종의 옵션(설정)

   속성 = "속성값"으로 사용

   여러 속성을 지정할 경우 각 속성을 띄어쓰기로 구분한다

 

 

3) html/css/javascript

 

HTML

   웹 문서의 구조를 정의하고 콘텐츠를 표현하는 기본 마크업 언어

   HyperText : 다른 텍스트에 대한 링크가 포함된 텍스트

   Markup Language : 텍스트에 의미를 부여하기 위해 문서에 표시하는 시스템

 

CSS(Cascading Style Sheet)

   HTML 문서에 레이아웃과 디자인을 포함한 시각적요소를 정의하기 위한 규격

   HTML은 콘텐츠 내용과 구조를 정의하고 CSS에서 콘텐츠의 위치, 정렬, 글자크기, 여백, 배경색상등을 정의함

   디자인을 적용할 HTML 요소를 셀렉터(Selector)로 지정해 원하는 디자인 속성을 부여

 

Javascript

   HTML 문서에 이벤트 처리나 동적으로 변화하는 콘텐츠를 표현하거나 서버와의 연결을 통해

   데이터를 가지고 오는 등의 프로그램적인 요소

   웹에서 새로운 뉴스, 날씨, 상품정보 등이 접속할 때마다 변화하는 것은 일반적으로

   서버에서 데이터베이스 연동 등 백엔드 프로그램을 통해 구현

   서버에 새로 접속하지 않고도 화면의 정보가 변화는 기능

   HTML 문서를 동적으로 처리하고 이벤트(버튼 클릭 등)를 처리할 수 있는 기능

 

 

1. HTML 태그

1) 이미지 삽입 태그

   <img src="파일경로" alt="설명">

   src 속성은 넣고 싶은 이미지의 경로를 입력하며, 웹 상의 url주소를 입력해도 된다

   alt는 이미지에 대한 설명이며 어떠한 이유로 이미지가 뜨지 않으면 설명이 대체되서 나온다

 

2) 링크 태그(앵커태그)

   <a href="링크주소나 경로">링크를 걸어줄 요소</a>

   a태그로 감싼 요소는 해당 경로로 링크가 걸린다

 

 

 

2. 인라인/블록 요소

   <span></span>    : 대표적인 인라인 태그

   <div></div>    : 대표적인 블록 태그

   span과 div 태그는 사이트 화면의 레이아웃을 나누는데 주로 사용되며 매우 중요하다

   

1) 인라인 요소와 블록요소

   요소를 여러 관점으로 분류할 수 있다

   그 중 가장 중요하게 봐야할 것은 인라인과 블록이다

   HTML의 모든 요소는 인라인과 블록으로 나뉜다

   CSS에서 인라인과 블록에 따른 처리를 하게 되므로 중요하다

 

인라인 요소

   내용물의 크기만큼만 영역을 차지하므로 다른 요소와 같은 줄에 위치할 수가 있다

   즉, 줄바꿈이 되지 않는다

   대표적으로는 span, img, strong 등이 있다

 

블록요소

   내용물과 상관없이 한 줄을 다 차지하므로 다른 요소와 같은 줄에 위치할 수가 없다

   즉, 너비 속성를 100%를 다 차지하고 자동으로 줄바꿈이 된다

   다른요소를 하나의 블록으로 묶어주기 위해 사용한다

   블록요소는 직사각형 모양이다

   대표적으로는 h1, div, p등이 있다

 

3. CSS(Cascading Style Sheets)

   HTML로 만든 웹 문서의 스타일을 담당

   스타일이란 글꼴, 색상, 테두리, 정렬, 레이아웃 방법등의 외관을 말한다

   내용과 디자인이 분리되어 있어야 유지보수에 유리하므로 CSS를 사용한다

 

CSS 형식

   속성1:속성값1;

   속성2:속성값2;

   속성은 미리 정해져있으며 필요에 따라 검색해서 사용한다

 

스타일 적용하는 방법

1. 인라인 스타일

   스타일을 적용시킬 태그에 style 속성을 사용한다

   <p style = "color:red; backgroud-color:black">내용</p>

 

2. 내부 스타일

   <head> 영역에 <style></style> 태그를 사용하여 각 요소들의 스타일을 정의한다

   선택자{

      속성1:속성값1;

      속성2:속성값2;

   }

 

선택자(id, class)

   id와 class 속성은 특정 태그들을 식별하고 그룹화 하는데 사용한다

   모든 태그에 사용가능한 속성이다

   하나의 태그에 id와 class를 동시에 가질 수 있으며 class를 여러개 가질 수도 있다

   주로 class를 많이 사용하며 id는 그 페이지에서 중요하고 유일한 요소에게 부여하는 것이 좋다

 

id

   특정 태그에 식별 가능한 고유한 값을 부여한다

   선택자로 사용할 때는 #id로 사용한다

 

class

   여러 태그를 하나의 집단으로 묶어준다

   선택자로 사용할 때는 .class로 사용한다

 

3. 외부 스타일

   별도의 css파일을 만들어 적용시킨다

   css와 html을 완전히 분리하여 관리할 수 있기 때문에 가장 많이 사용하는 방식이다

   css파일을 html에 적용시키기 위해서는 <head> 영역에 link 태그를 사용한다

   <link rel="stylesheet" href="파일경로">

   rel 속성은 현재 페이지와의 관계를 의미

   href 속성은 적용시킨 css파일의 경로를 작성한다

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01_imgtag</title>
</head>
<body>
    <!-- 절대경로 : 시작 위치부터 경로가 있는 파일 명 까지 모두 작성
         상대경로 : 현재 내 위치를 기반으로 이동하는 경로 
             ./ :현재 폴더
             ../: 상위폴더  -->

    <img src= "./../img_test/다운로드.jpeg" alt="테스트" width="400px">
    <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDEyMDNfMTI4%2FMDAxNjA2OTI2ODI0MDQ4.6EVz1jYhjNAvvlDvmpvIZcuIOFL1-G1W6DmZ5geI_pEg.lBSWx1mMUmzKV9sKNS4Hemk3rK2jfx6JKYu4LC34NK4g.JPEG.skdud0142%2FScreenshot%25A3%25DF20201203%25A3%25AD013249%25A3%25DFPhotos.jpg&type=l340_165" width="400px">

    <!--높이와 넓이를 지정할 수 있고 단뒤는 px 와 %사용 -->

</body>
</html>

- img 태그 적용 , 절대경로, 상대경로로 

 

<!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>
    <ul>
        <li><a href="https://www.naver.com">네이버</a></li>
        <li><a href="https://www.google.com">구글</a></li>
        <li><a href="./../day01/task01.html">task01</a></li>
    </ul>
</body>
</html>

- a 링크 태그 적용 마찬가지 절대경로, 상대경로 둘다 가능 

 

<!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>
    <h1>a 태그 실습</h1>
    <p> 이 페이지를 똑같이 만드세요!</p>
    <table border="1" width="500px" height="500px" cellspacing="0">
        <caption>사이트 링크</caption>
        <tr>
            <th>사이트이름</th>
            <th>로그</th>
            <th>설명</th>
        </tr>
        <tr>
            <td>네이버</td>
            <td><a href="https://www.naver.com"><img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDEyMDNfMTI4%2FMDAxNjA2OTI2ODI0MDQ4.6EVz1jYhjNAvvlDvmpvIZcuIOFL1-G1W6DmZ5geI_pEg.lBSWx1mMUmzKV9sKNS4Hemk3rK2jfx6JKYu4LC34NK4g.JPEG.skdud0142%2FScreenshot%25A3%25DF20201203%25A3%25AD013249%25A3%25DFPhotos.jpg&type=l340_165" width="100px" height="100px"></a></td>
            <td rowspan="3">내용없음</td>
        </tr>
        <tr>
            <td>구글</td>
            <td><a href="https://www.naver.com"><img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDEyMDNfMTI4%2FMDAxNjA2OTI2ODI0MDQ4.6EVz1jYhjNAvvlDvmpvIZcuIOFL1-G1W6DmZ5geI_pEg.lBSWx1mMUmzKV9sKNS4Hemk3rK2jfx6JKYu4LC34NK4g.JPEG.skdud0142%2FScreenshot%25A3%25DF20201203%25A3%25AD013249%25A3%25DFPhotos.jpg&type=l340_165" width="100px" height="100px"></a></td>
      
        </tr>
        <tr>
            <!-- 타겟 속성을 _blank 로 주면 새탭에서 열림-->
            <td>다음</td>
            <td><a href="https://www.naver.com" target="_blank"><img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDEyMDNfMTI4%2FMDAxNjA2OTI2ODI0MDQ4.6EVz1jYhjNAvvlDvmpvIZcuIOFL1-G1W6DmZ5geI_pEg.lBSWx1mMUmzKV9sKNS4Hemk3rK2jfx6JKYu4LC34NK4g.JPEG.skdud0142%2FScreenshot%25A3%25DF20201203%25A3%25AD013249%25A3%25DFPhotos.jpg&type=l340_165" width="100px" height="100px"></a></td>
  
           
        </tr>
    </table>
</body>
</html>

- table 을 이용한 링크태그, img 태그 실습

-a 태그 안에 img 태그 넣어주면 img 클릭했을때 a태그의 링크로 이동 가능 

-a 태그의 target = "_blank"  속성을 이렇게 주면 새탭에서 링크가 열린다. 

 

<!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>
    <h1>애완동물 목록</h1>

    <table border="1" width="500px" height="500px ">
        <tr>
            <th>종류</th>
            <th>이름</th>
            <th>설명</th>
        </tr>

        <tr>
            <td>고양이</td>
            <td><a href="https://www.google.com/imgres?imgurl=https%3A%2F%2Fi.namu.wiki%2Fi%2Fd1A_wD4kuLHmOOFqJdVlOXVt1TWA9NfNt_HA0CS0Y_N0zayUAX8olMuv7odG2FiDLDQZIRBqbPQwBSArXfEJlQ.webp&tbnid=1Y6bwWMHGsc2jM&vet=12ahUKEwiUpb6yodWDAxVWja8BHbnZAlsQMygCegQIARBJ..i&imgrefurl=https%3A%2F%2Fnamu.wiki%2Fw%2F%25EA%25B3%25A0%25EC%2596%2591%25EC%259D%25B4&docid=FIVAl-Pt0-9lEM&w=1000&h=667&q=%EA%B3%A0%EC%96%91%EC%9D%B4&ved=2ahUKEwiUpb6yodWDAxVWja8BHbnZAlsQMygCegQIARBJ"> 별이 </a></td>
            <td>귀여운 고양이</td>
        </tr>

        <tr>
            <td>강아지</td>
            <td><a href="https://www.google.com/url?sa=i&url=https%3A%2F%2Fko.wikipedia.org%2Fwiki%2F%25EA%25B0%2595%25EC%2595%2584%25EC%25A7%2580&psig=AOvVaw1im4R6IH1IoQVR92RPJWBB&ust=1705060013405000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCLCJg9ah1YMDFQAAAAAdAAAAABAD">치즈</a></td>
            <td>멋진 강아지</td>

        </tr>

        <tr>
            <td>햄스터</td>
            <td><img src="data:image/jpeg;base64,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"></td>
            <td>동글동글 햄스터</td>
           
        </tr>
    </table>

    <h2>다른 유용한 링크</h2>
    <ul>
        <li> <a href="https://www.naver.com" target="_blank">네이버</a> </li>
        <li> <a href="http://www.google.com" target="_blank">구글</a> </li>
        <li> <a href="https://www.daum.net/" target="_blank">구글</a> </li>
    </ul>

 
</body>
</html>

- a, img, 실습 target 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인라인 요소와 블록요소</title>
</head>
<body>
    <span>span 태그는 인라인 태그이다.</span>
    <span>인라인 요소는 줄바꿈이 되지 않는다.</span>
    <span>인라인 요소는 컨텐츠 크기만큰만 공간을 차지한다. </span>
    <!--span 과 p태그 비교-->
    <p>p 태그 예시1</p>
    <p>p 태그 예시1</p> 
    <!--p 태그는 문단간격 있음 div는 없음-->
    <div>div 태그는 대표적인 블록 요소를 만드는 태그이다</div>
    <div>블록요소는 줄 전체를 차지하며 박스 형태이다</div>
    <div><span> div 태그로 다른 태그를 묶을 수 있다</span></div> <!--이때 div 태그 큰 의미 x 걍 span 묶어서 블록화 해주는 용도-->
</body>
</html>

 

인라인 태그 : span 

블록태그 : p(문단간격 ㅇ) , div(줄만바뀜) 

 

'웹개발 기초 > html_css' 카테고리의 다른 글

가상선택자,transform,애니메이션,form  (1) 2024.02.12
position , 고급선택자  (2) 2024.02.12
display: flex  (0) 2024.02.12
css 인라인 ,블록요소 ,박스모델  (0) 2024.02.12
html 기초  (2) 2024.02.12

'웹개발 기초/html_css'의 다른글

  • 현재글img, a 태그,

관련글

티스토리툴바