본문 바로가기
반응형

전체 글53

HTML Picture | 연동형 이미지 | 서로 다른 디바이스에 연동하기 HTML 태그는 서로 다른 디바이스나 각 기기의 화면 사이즈에 맞게끔 자동으로 디스플레이 되는 것을 도와주는 태그이다. 태그는 상위 태그로써, 하나 이상의 태그를 사용하고, srcset 속성을 사용해 각각의 다른 이미지도 넣을 수도 있다. 태그를 여러개 지정해 놓으면, 웹브라우저가 판단해서 가장 잘 디스플레이 되는 이미지로 보여준다. 만약 첫번째 source 에 해당되는 이미지를 브라우저가 읽어내었다면, 그 밑에 있는 다른 source 코드는 무시된다. 여기서 주의할 점은 태그는 섹션 안의 맨 마지막 문단에 와야 한다. 태그가 먹히지 않을 경우, 브라우저는 이 태그의 사진을 디스플레이 해준다.  이러한 태그를 쓰는 이유는, 몇몇의 브라우저나 디바이스들은 모든 이미지 포맷을 읽어내지 않는다.. 2022. 8. 13.
HTML Background Images | 배경 이미지 삽입하기 ​style 속성과 CSS의 background-image 특성을 사용 하면 된다. (p에다 코드를 짜주면, 단락 부분에만 배경이미지 보임)​ 태그를 이용해 섹션에 추가하여 코드를 짤 수도 있다. (p에다 코드를 짜주면, 단락 부분에만 배경이미지 보임) 배경화면을 전체 배경에 입히고 싶다면, body 요소를 사용해서 코드를 짜주면 된다. 태그를 이용해 섹션에 추가하여 코드를 짠다. (여기서, 태그 안의 body와 문서 자체의 와는 다른 개념이므로, body가 2번 쓰일 수도 있다.) 배경 이미지가 요소보다 작은 경우, 이미지는 반복하여 나열된다.이미지 자동 반복을 피하려면, background-repeat 속성에서 no-repeat 특성을 추가하여 코드를 추가해 주면 된다.  이미지를 전체 배경 .. 2022. 8. 12.
HTML Image map | 하나의 사진에 여러개의 링크페이지 삽입하기 ​예를 들어, 컴퓨터와 핸드폰, 커피가 있는 1개의 이미지에서 각각의 컴퓨터,핸드폰,커피의 그림 부분을 클릭하면 서로 다른 HTML 링크페이지로 넘어갈 수 있게 만들 수 있다.  1) 태그를 사용하고, 속성으로 usemap = "#변수" 를 가져가면 된다 ​2) 그 다음, 요소를 추가한다. 요소는 이미지 map을 만드는 데 사용되고, name 속성을 사용하여 이미지에 연결 시킬 수 있다. name 속성은 반드시 의 usemap과 value 값이 같아야 한다. ​3) 클릭할 수 있는 영역 설정은 요소를 사용하면 된다. shape 이라는 속성을 사용하여, area를 지정하게 된다. ​** Shape ** ① rect : 사각형 ② circle : 원형 ③ poly : 다각형 ④ default : 기본.. 2022. 8. 11.
HTML Images 이미지 기본 서식 ​ 태그는 empty 태그로써, closing tag를 동반하지 않고 단독으로 쓰인다. 태그가 가질 수 있는 속성은 2가지다. - src : 이미지 url - alt : 이미지에 대한 대체 텍스트  ​​이미지의 크기를 표현 하는 방법은 2가지가 있다. ​ 1) CSS의 style 속성을 이용하여 width와 height에 value를 주는 방법 ​ 2) HTML의 width와 height 속성을 이용 하는 방법​이미지의 크기는 반드시 지정되어야 한다. 그렇치 않을 경우, 이미지를 로드할 때 웹페이지가 깜빡 거리는 현상이 나타난다.그리고 웬만하면 style 속성으로 사용하는 것이 좋다. 상위 그룹에서 크기를 변경하더라도, CSS style에는 적용되지 않으므로.  ​1) Sub-folder 안에 있는 .. 2022. 8. 10.
HTML Links 하이퍼링크 | CSS로 링크 꾸미기 링크는 태그로 정의되고 href 를 속성으로 가진다. 형식 : a href="url">link text/a> 기본적으로 링크된 페이지는 현재 브라우저 창에서 넘어가게 되는데, 이것을 변경하려면, target 속성을 사용하면 된다. target 속성은 링크된 문서를 열 위치를 지정하고, 다음 values 중 하나를 가질 수 있다. 이러한 형식을 가진다. a href=" 링크url " target="_blank"> text /a>​ 1) _self : 기본값. 현재 윈도우창에서 그대로 링크된 웹페이지를 연다. 2) _blank : 새 윈도우 창을 열어서 웹페이지를 연다. 기존 창은 그대로 남는다. 3) _parent : 현재 프레임의 부모 프레임에서 새 웹페이지가 열린다. 4) _top : 최상위(가장.. 2022. 8. 9.
HTML Styles - CSS CSS 는 웹 페이지의 레이아웃 형식을 지정하는데 사용된다. 한번에 여러 웹페이지의 레이아웃 컨트롤이 가능하다. 부모 element에 적용을 하면 자식 element에 까지 자동으로 적용된다. 예를 들면, body에서 text 컬러를 blue로 지정 했을때, heading 과 paragraph 까지 text가 blue로 적용된다.  CSS를 사용하는 3가지 방법이 있다. 일반적으로 사용되는 방법은 external. ​ 1. Inline : HTML 요소 내부의 style 속성 사용 2. Internal : 섹션의 요소 사용 3. external : 요소를 사용하여 외부 CSS 파일에 연결​​​ : 내부 style 속성​Inline CSS는 HTML 요소에 고유한 스타일을 적용하는데 사용된다. 컬러.. 2022. 8. 8.
반응형