속성이 필요한 태그

이전 포스트에서는 문자열(Text)와 관련된 태그들을 주로 살펴 보았다. 사실 이것은 아주 초창기의 HTML 표준과도 많이 비슷하기 때문에 기본적인 구조를 익히는 데 도움을 받을 수 있을것이다.

Recap

  • 문단을 구분하기 위해서 p 태그를 사용한다.
  • 문단 내부 또는 일반적은 줄바꿈을 위해서 br 태그를 사용한다.
  • 단어 또는 문장의 강조를 위해서 strong, u, em 태그를 사용한다.
  • 제목 또는 문서의 구조를 위해서 헤딩 태그를 사용한다. 헤딩 태그는 h1 ~ h6로 표시된다.

속성

속성 (Attribute:어트리뷰트) 는 태그의 괄호 안에서 태그 다음에 위치한다. 일반적으로 속성은 속성의 이름을 가지고 있고, 이 속성의 이름뒤에 속성의 값을 넣게 되어있다. 이때까지의 실습과 동일하게 속성의 사용법 역시 예외가 존재하므로 주의하도록 한다.

이미지

먼저 실습에 사용할 이미지를 준비하도록 한다. 이미지는 구글의 이미지 검색을 통해서 알맞은 이미지를 다운로드 한다. 실습용이기 때문에 아주 좋은 품질이거나 아이콘같이 작은 이미지는 지양하도록 한다.
다운로드 된 이미지는 아마도 여러분의 다운로드 폴더 또는 문서 디렉터리등에 저장 될것이다. vscode를 켜놓은 상태에서 오른쪽의 파일창(실습을 진행하고 있는 파일의 이름이 표시되고 있는 곳)에 끌어다 놓아 파일을 복사 또는 이동시키도록 한다.
인터넷에서 다운로드 파일의 경우 이름이 복잡한 경우들이 많이 있으니 이름을 타이핑 하기 편하도록 수정하도록 한다. 본 문서에서는 "downimage.png"가 파일 이름이 되겠다.

어디의 이미지인가 - src

앞서 해왔던 방식으로 html 보일러 플레이트 (상용구 코드)로 부터 시작해 보자. 이전에 배운 h1 태그를 이용하여 좀더 보기 좋게 하였고 <img> 태그를 사용한다.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <h1>이미지 태그 연습 (img tag)</h1>
        <img src="downimage.png">
    </body>
</html>

브라우저를 통하여 이미지가 표시되는 것을 확인할 수 있다.

높이와 폭 - height, width

근래에 사용되는 이미지들이 그 해상도 (가로의 픽셀개수 x 새로의 픽셀개수)가 큰 편이라서 이미지가 크게 나올수도 있을것 같다. 물론 작은 경우도 있을수 있으므로 img 태그의 속성을 사용하여 폭(width)과 높이(heigth)를 지정해 보도록 하자

        <img src="downimage.png" width="300" height="300">

조금 생각해 보면 당연한 이야기 이겠지만, 원래의 사이즈를 무시하고 별도의 사이즈를 지정 하였기 때문에 그림이 정확히 정사각형이 아닌경우 그 비율이 달리 보일수 있을것이다 이경우 아래와 같이 작성하여 어떻게 보이는지 확인해 보도록 한다.

        <img src="downimage.png" width="300" height="300"><br>
        <img src="downimage.png" width="300"><br>
        <img src="downimage.png" height="300"><br>

위아래로 차이점이 잘 보이게 하기 위해서 br 태그를 사용한 것에 대해서 유의한다.

제목 달기 - alt

요즘에야 생각 못할 문제이기는 하지만, 예전에는 문서 만을 표시하던 html 브라우저가 있었다. 현재에는 종종 일부러 이미지를 표시하지 않거나 검색엔진 로봇 방문과 같은 경우 이미지를 굳이 표시할 필요가 없다. 다만 이 경우 이미지가 어떤 내용을 담고 있는지 표시 해주는 역할로서 alt 속성을 사용한다. 이미지 태그에 alt 속성을 잊지 않는 것이 좋은 습관이라 할 수 있다.

        <img src="downimage.png" width="300" height="300"><br>
        <img src="downimage.png" width="300" alt="중간이미지"><br>
        <img src="downimage.png" height="300"><br>


다른 문서로의 이동

속성이 많은 tag의 다른 하나는 a 태그라고 할 수 있다. a 태그는 a 자체 보다 a 태그의 href 속성을 이용하는 경우가 훨씬 많다.

앵커 - a

a 태그는 anchor를 나타내는 태그로서 HTML 초창기에 내용이 긴 (논문 등의) 문서 내부에서 이동을 하기 위하여 그 위치를 정해 놓는(배의 닻과 같이) 기능을 한다. 근래의 html 용례로서는 문서가 그다지 길지 않기 때문에 독립적으로는 많이 사용되지 않지만, href 속성을 이용하여 페이지 간, 웹사이트 간 이동을 가능하게 한다.
이러한 문서 내부 외부로 이동 기능은 일반적인 문서를 기능성 문서로 탈바꿈 시킨 큰 변화이며 현재의 인터넷 기반의 웹 서비스를 구성할 수 있게 되는 기본 아이디어가 된다.

어디로 갈 것인가? - href

문서의 내용을 클릭 해서 이동 하려면 꼭 있어야 할 것이 바로 어디로 갈 것 인지이다. 이렇게 어디로 갈 것 인지에 대한 정보를 적기 위한 속성이 href 이다. href 는 hypertext reference 줄임말로서 하이퍼 텍스트가 어디로 갈 것인지 참조하는 곳을 쓰기 위한 곳이다.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <h1>a 태그 연습 (a tag)</h1>
        <a href="https://www.google.com/">구글</a>
        <a href="https://www.naver.com/">네이버</a>
        <a href="https://www.daum.net/">다음</a>
    </body>
</html>

href 에는 주소라고 불리우는 URL 형식으로 작성한다. 보통 브라우저의 주소창에 표시되는 정보이다. 결과물을 확인 하면서 이번 케이스에서는 br 태그를 사용하지 않았기 때문에 화면이 어떻게 나타나는지 잘 살펴보도록 한다.



어디에서 보여줄 것인가? - target

어디에서 보여줄것인가? 라는 질문에는 당연히 지금 화면이지 라고 답변할 수 있을것이고, 이것은 좋은 답변이라고 할 수 있다. 일반적으로 href 속성을 이용하여 이동을 하는 경우 지금 화면을 기준으로 해당 URL로 링크가 되는데, 이 링크를 새로운 창에서 열어보고 싶은 경우가 있다. 이런 경우 target 속성에 "_blank" 값을 넣어 기능을 수행 할 수 있다.

        <a href="https://www.google.com/" target="_blank">구글</a>

댓글

댓글 쓰기

이 블로그의 인기 게시물

CSS에서 박스 모델 배열.

이미지
css 에서 스타일을 지정할 때 스타일이 화면 상 자리를 차지하고 있는 것을 하나의 박스로 둘러싸고, 이것을 이용하여 배열을 하는 것을 박스 모델 배열이라고 한다. Recap 스타일 요소를 html 에 포함한다. 기본 작성 규칙 선택자를 이용하여 요소, id, class를 이용한 스타일 적용 객체를 선택한다. 배경색, 외각선, 폭과 높이의 스타일 지정 할 수 있다. RGB 값을 이용하여 색상을 숫자로 표현한다. flex 모델 부모 요소에 flex 스타일을 적용 flex 박스 모델을 사용하기 위하여 부모 요소에서 flex 스타일을 지정한다. 우선 flex 모델에 대하여 살펴 보기 위하여 다른 속성들은 설정하지 않고 살펴보도록 한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: #ccc; margin-top: 30px; } #top { background-color: white; border: none; } .rect { border: 1px solid black; width: 250px; height: 250px; } #rec_container { display: flex; } </style> </head> <body> <div id=...
자세한 내용 보기

페이지 레이아웃을 위한 준비

이미지
이제까지 html 파일을 작성하면서 연습용 파일을 이용하였지만, 실제 업무 또는 결과물을 위해서는 페이지 또는 사이트의 기획 부터 시작 하는 것이 맞을 것이다. 현재는 기획은 없지만, 일반적인 회사에서 많이 사용하는 페이지의 구조를 생각하여 참조할 레이아웃을 찾아보았다.   이 페이지를 각각의 구성요소로 분해하고, 이를 배치 하는 것을 레이아웃 이라고 한다. 위의 샘플 이미지를 이용하여 레이아웃을 잡아보면 각 개인마다 다른 의견들이 있겠지만 대부분 아래와 같을것이다.   Recap 표 표시 하기 - table, tr, td 태그 표의 속성 조정하기 - width, height 표의 각 칸 (cell) 의 속성 조정하기. 내용을 구조화 한다. - div 우선 "구조화 한다" 라는 단어가 생소할 듯 하다. 구조화란 "어떠한 대상을 비슷한 성질의 것으로 분류하고 그 분류를 차곡차곡 정리하여 조직적으로 쌓아 올린다." 라는 뜻이다. 이전의 포스트에서 테이블을 이용하여 사각형을 표시할 수 있게 되었으며, 위의 이미지를 보면 사각형의 모음으로 내용을 구조화 시킨 것을 살펴 볼 수 있다. 하지만 표를 이용하여 구조화된 페이지를 구성하게 되면 전체 페지가 표 하나와 같은 형태를 지니게 된다. 즉 html 문서 자체가 표가 되어 버리는 상황이 된다. 이것은 검색엔진이나 그림의 형태가 중요하지 않은 서비스에서 큰 장애가 된다. 따라서 이러한 구조화된 형태를 만들기 위하여 div 태그가 존재 한다. div 태그는 그 자체로는 내용에 영향을 미치지 않는다. <!DOCTYPE html> <html> <head> <title>TITLE</title> </head> <body> <div>top</div> <div>logo</div...
자세한 내용 보기

CSS 의 간략한 설명.

이미지
css란 cascading style sheets의 줄임말로서 스타일시트라고 말하기도 한다. 계단식(cascading:캐스케이딩)이라고 표시된 이유는 앞선 포스트에서 잠시 언급하였던 수직적인 구조화를 나타내기 때문에 붙은 것으로, html 의 요소에 디자인적(표시상) 디테일하고 다양한 제어를 하기 위하여 별도의 문법적인 구조를 가진 문서이다. Recap div를 이용하여 html 문서를 구조화 한다. div를 계층적으로 이용하여 부모 자식 구조를 만든다. div 요소 안에 style 속성을 이용하여 해당 요소의 스타일을 제어 한다. div 요소를 구분하기 위하여 id 와 class 속성을 사용한다. 앞으로 태그라는 용어 대신 요소(element:엘레멘트)를 사용한다. 요소가 보다 알맞은 용어이다. style 요소 css는 여러 방식 중 하나로서 html 문서안에 위치할 수 있다. 브라우저 또는 해석기에 따라 차이는 있지만 2023년 현재 대부분의 브라우저에서는 어느 위치에 style 요소가 존재 하여도 적용이 되지만, 일반적으로 head 요소의 자식 요소로 사용한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: ghostwhite; } </style> </head> <body> <div id="top" style="border: 3px solid red; height:30">top</div> <div id="logo" style="border:...
자세한 내용 보기