HTML web2 06일차 - dnf,wbr 태그, 슬라이드

Front-end/HTML

by 본투비곰손 2023. 5. 29. 22:58

728x90

1.dfn 태그

용어 및 정보등 내용을 정의 해주는 태그

글자가 기울어 지고 마우스를 올리면 "정의내용"이 아래쪽에 나타난다.

<dnf title="definition정의하다">dnf 태그</dnf>

대표사진 삭제

정의해준 내용이 나타난다.

wbr태그

특수 줄바꿈 태그

html태그는 안에 작성된 내용이 줄바꿈이 일어날때 영어단어,한글단어 상관 없이 단어 전체가 줄바꿈되는데 wbr태그를 사용하면 태그를 사용한 사용한 지점에서 부터 오른쪽에 있는 내용이 줄바꿈이 일어난다.

<p>안녕하세요 p태그 입니다 저는 문단 단락태그이며 이글은 한글로 작성되어 있으며
			훈민정음의 영어표기는 hunminjeongeum 입니다</p>

대표사진 삭제

사진 설명을 입력하세요.

<p>안녕하세요 p태그 입니다 저는 문단 단락태그이며 이글은 한글로 작성되어 있으며
			훈민정음의 영어표기는 hunmin<wbr>jeongeum 입니다</p>

대표사진 삭제

사진 설명을 입력하세요.

wbr대신 br을 사용해도되지만 br은 줄바꿈이 필요없을때도 줄바꿈이된다는 차이가 있다.

css슬라이드

div의 크기를 보여주고싶은 창의 크기로 정하고 ul의 가로 크기를 div의 가로 크기 X 보여질 이미지의 갯수(li의 갯수) 로 설정한다.

li의 가로 크기는 div의 가로크기와 동일하게 하여 float:left를 사용하여 가로 배열시킨다. li에 원하는 배경색을 nth-child를 사용하여 하나씩 적용시킨다.

#scroll{width:600px;height:400px;margin:0 auto;overflow:auto;}
		/*px단위일 때 #scroll 가로와 세로값은 내가 웹사이트 상에서 보여주고싶은 슬라이드쇼의 영역으로 적용된다*/
		
		
		ul{width:2400px;height:400px;}
		/*px단위일 때 #scroll의 가로값 x li의갯수 = ul의 가로값*/
		
		ul li{width:600px;height:400px;float:left;}
		/*px단위일 때 #scroll의 가로값과 동일하다*/
		
		ul li:nth-child(1){background-color:#123456;}
		ul li:nth-child(2){background-color:#987654;}
		ul li:nth-child(3){background-color:aqua;}
		ul li:nth-child(4){background-color:pink;}

대표사진 삭제

사진 설명을 입력하세요.

스크롤이 가능한 4개의 이미지가 보여진다.

위 방법과 radio태그를 활용해서 버튼 클릭시 이미지가 바뀌게 만들어 줄 수 있다.

<head>
    <meta charset="ko">
    <title>css슬라이드 #2</title>
    <style>
        *{margin: 0;padding: 0;}
        li{list-style: none;}
        .clearfix{content: "";display: block;clear: both;}
        input{display: none;}
        
        #slide{width: 1000px;height: 300px;margin: 0 auto;border: 3px solid black; overflow: hidden;}
        #slide ul{width: 4000px;height: 300px;}
        #slide li{width: 1000px;height: 300px;float: left;}
        
        #slide li:nth-child(1){background-color: red;}
         #slide li:nth-child(2){background-color:green;}
         #slide li:nth-child(3){background-color: blue;}
         #slide li:nth-child(4){background-color: yellow;}
        
        .scroll label{width: 20px;height: 20px;background-color: red;border: 2px solid #666;
                      display: inline-block;cursor: pointer;}
        .scroll{width: 120px;margin: 20px auto;}
        
        #scroll1:checked~ul{margin-left: 0px;}
        #scroll2:checked~ul{margin-left: -1000px;}
        #scroll3:checked~ul{margin-left: -2000px;}
        #scroll4:checked~ul{margin-left: -3000px;}
        
        
    </style>
    
</head>
<body>
    <div id="slide">
        <input type="radio" name="a" id="scroll1">
        <input type="radio" name="a" id="scroll2">
        <input type="radio" name="a" id="scroll3">
        <input type="radio" name="a" id="scroll4">
        <ul class="clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>

        </ul>
    </div>
    
    <div class="scroll">
        <label for="scroll1"></label>
        <label for="scroll2"></label>
        <label for="scroll3"></label>
        <label for="scroll4"></label>
    
    </div>

보여질 이미지의 크기는 1000px 이고 radio태그를 이용해서 이미지를 바뀌는 출력물을 만들려고한다.

radio태그는 꾸미기가 어려워 label에 기능을 상속하여 사용하기위해 display:none속성을 주어서 보이지 않게한다.

input{display: none;}

보여질 이미지의 크기 1000px이고 이미지의 갯수는 4개이다.

#slide{width: 1000px;height: 300px;margin: 0 auto;border: 3px solid black; overflow: hidden;}
        #slide ul{width: 4000px;height: 300px;}
        #slide li{width: 1000px;height: 300px;float: left;}
        
        #slide li:nth-child(1){background-color: red;}
         #slide li:nth-child(2){background-color:green;}
         #slide li:nth-child(3){background-color: blue;}
         #slide li:nth-child(4){background-color: yellow;}

클릭하면 이미지가 바뀌게 radio태그를 상속받는 label을 활용하여 가로 세로 20px인 버튼을 만들어준다.

<div class="scroll">
        <label for="scroll1"></label>
        <label for="scroll2"></label>
        <label for="scroll3"></label>
        <label for="scroll4"></label>
</div>
위는 태그이고 아래는 적용된 스타일이다.
 .scroll label{width: 20px;height: 20px;background-color: red;border: 2px solid #666;display: inline-block;
               cursor: pointer;border-radius: 300px;}
 .scroll{width: 120px;margin: 20px auto;}

클릭하면 이미지가 바뀌게끔 가각의 radio ID 에 cheked를 적용하여 체크시 각각 margin-left:0px , margin-left:-1000pxmargin-left:-2000pxmargin-left:-3000px씩 적용해준다.

        #scroll1:checked~ul{margin-left: 0px;}
        #scroll2:checked~ul{margin-left: -1000px;}
        #scroll3:checked~ul{margin-left: -2000px;}
        #scroll4:checked~ul{margin-left: -3000px;}

적용하게되면 아래와 같이 출력된다.

대표사진 삭제

사진 설명을 입력하세요.

728x90

'Front-end > HTML' 카테고리의 다른 글

07일+08일차 css슬라이드 응용, 드롭다운메뉴 (0)	2023.05.30
HTML web2 08일차 - transition (0)	2023.05.29
HTML web2 04일차 - cursor,iframe,form태그 (0)	2023.05.27
HTML web2 1,2일차 -시맨틱태그, 오디오 태그, 비디오 태그 (0)	2023.05.26
HTML 13일차-기타정보(em,rem 중요!!) (0)	2023.05.25