div 태그는 HTML5에서 가장 많이 사용되는 태그라고 볼 수있습니다. 주로, 해당 블록(영역설정)을 넣을때 사용하는 편입니다. 우선 빠른 이해를 위해 코드 내용부터 알아보도록 하겠습니다.
<div>입력할 태그 OR 내용</div>div의 기본 태그 작성은 <div> </div> 입니다. 이 안에다가, 무언가의 입력 내용을 넣는다거나, 추가 html 태그를 삽입할 수있습니다.
<div><p>div 안에 있는 p태그입니다.</p></div>
<div><span>div 안에 있는 span태그입니다.</span></div>위와 같이 div 블럭안에 p태그와 span태그를 넣어주었으며, 위와 같이 코드활용을 하실 수있습니다.
div 태그에 클래스 속성 부여해보기
<div class="container"></div>위 코드를 보시면 container이란 클래스 속성을 넣어준 것을 확인할 수있습니다.
각 태그에다가 클래스 속성을 넣는 이유는?
클래스 속성을 넣어주는 이유는 각 태그를 구별해주기 위함이라고 보시면 되겠습니다. 예를들어, 아래의 코드를 보시면..
<div> </div> <!-- 클래스명을 넣지 않은 단순 div -->
<div class="container"> </div> <!-- container 클래스명을 넣어준 div -->첫 번째는 div란 속성 하나만 가지고 있습니다. 두번째는 div란 속성 뿐만아니라 container이란 클래스 속성까지 가지고 있는 상태입니다.
css를 통해서, 각각 div 블럭에다가 다른 효과를 주고 싶지만, 클래스 속성을 안넣어버린다면, 각각 다른 효과를 못줍니다. (각 div마다 다른 효과를 줄 수있는 nth-child 같은 css 속성도 있습니다만, 한계가 있기때문에 각 태그마다 클래스 속성을 넣어서 구분해주시면 좋습니다.)
위 내용을 코드를 통해서 조금 더 쉽게 풀어보도록 하겠습니다.
1번 예제
<div> </div> <!-- 클래스명을 넣지 않은 단순 div -->
<div> </div> <!-- 클래스명을 넣지 않은 단순 div -->
<div> </div> <!-- 클래스명을 넣지 않은 단순 div -->
2번 예제
<div class="container"> </div> <!-- container 클래스명을 넣어준 div -->
<div class="container1"> </div> <!-- container1 클래스명을 넣어준 div -->
<div class="container2"> </div> <!-- container2 클래스명을 넣어준 div -->1번 예제의 각 div에다가 css 부여해보기
div {
width:100%;
height:100vh;
background:tomato;
}2번 예제의 각 div에다가 css 부여해보기
.container {
width:100%;
height:100vh;
background:tomato;
}
.container1 {
width:100%;
height:100vh;
background:red;
}
.container2 {
width:100%;
height:100vh;
background:blue;
}코드 내용을 보시면, 1번 예제에는 클래스 속성이 없는 div가 총 3개가 있습니다. 그러나, 각 div에 css 속성을 부여하고 싶지만, 사용할 수있는 태그 속성은 div 하나 뿐입니다. (위에서 말씀드린바와 같이 nth-child를 통해 부여할 수있지만, 내가 아닌 다른 사람이 봤을때, 구별하기 어렵기때문에 클래스 속성을 통해 반드시 구분해 두는 것이 좋습니다.)
두번째 예제의 경우는 각 div마다 클래스 속성을 넣어서, 구분을 해둔 상황입니다. 그럼, 각 div 클래스 속성에다가 내가 원하는 css 속성을 넣어줄 수있습니다.
또, css 뿐만아니라 자바스크립트 및 제이쿼리 등에도 많이 활용된다고 보시면 되겠습니다.
div 클래스 여러개 지정하기
클래스 여러개 지정의 경우는 또 다른 css 속성 등을 넣어주기 위함이라고 보시면 되겠습니다. 코드는 아래를 참고하시면 되겠습니다.
<div class="container container1 container2"></div> 각 클래스명 마다 한칸씩 띄어주시면서 작성하시면 됩니다. 그럼, 추후에 css 작성하실땐 .container {} .container1{} .container2{} 이런식으로 타겟팅해주시면 되며, 자바스크립트는 document.querySelector(‘.container’) document.querySelector(‘.container1’) document.querySelector(‘.container2’) 이런 식으로 타겟팅을, 제이쿼리 또한, 동일하게 해주시면 되겠습니다.
div태그를 가운데로 정렬하는 css 코드
div 태그를 가운데로 정렬하는 css는 다양하게 있는데요. 우선 제가 알고있는 선에서 모두 공개하도록 하겠습니다.
div {
width:1200px;
margin:0 auto; << 0 auto가 가운데로 정렬시키는 css 코드입니다.
}
div {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); << 이는 해당 블록에 정가운데로 정렬시킬 수있는 코드입니다. 부모요소에다가 position:relative 속성을 넣어주셔야 상속받을 수있습니다.
}
div {
text-align:center; << 하위요소까지 모두 가운데정렬을 시킵니다.
}div 태그 안에 div를 가운데로 정렬시키고 싶은경우
위에 작성된 css 코드 중, 선택자를 사용하시면 되는데요. 만약, 자식 요소만 선택하고 싶은 경우는 > 선택자를, 모든 하위요소를 적용시키고 싶은 경우는 공백을 넣어주시면 됩니다. 아래의 코드 예시를 통해 확인해보도록 하죠.
<div>
<div> -------------------> 자식요소
<div></div> -------------------> 자손요소
</div>
<div>
<div></div> -------------------> 자손요소
</div> -------------------> 자식요소
</div>div > div {
width:1200px;
margin:0 auto; << div 자식 요소에게만 width값을 1200px, margin:0 auto; 값을 주겠다는 의미입니다.
}
div div {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); << div 안에 있는 모든 div에게 속성을 부여하겠다라는 의미입니다.
}
div {
text-align:center; << 모든 div 태그에 속성을 부여하겠다라는 의미입니다.
}각 div 마다 가로로 나란히 열 형태로 만들고 싶은 경우
div는 블록태그입니다. 그렇기때문에 태그작성하게되면 세로열 출력됩니다. 그러나, 그리드 형태로 만들고 싶거나, 가로배치로 하고 싶을때가 있습니다. 가로 배치는 총 2가지 방법이 있습니다. 아래의 코드를 확인하도록 하죠.
div {
float:left;
}
div {
display:flex; << 부모요소에다가 해당 속성을 넣어줘야, 자식 요소들이 flex 영향을 받습니다.
}우선 float 속성과 flex가 있습니다. 두 가지 모두 가로로 배치시켜줄때 사용되는 css 속성입니다. 참고로 float으로는 가운데 정렬이 불가능하며, 억지로 만들어줄 수는 있습니다만, 추후 웹페이지 코딩시 문제가 됩니다. 그렇기때문에 가운데 정렬을 하고 싶으신 분들은 display:flex 속성을 사용하시면 됩니다.
하는 방법은 아래의 코드를 확인해보도록 하죠.
display flex 속성을 통해, div 태그들을 정 가운대로 배치해보기
<div></div>
<div></div>
<div></div>
<div></div>div {
width:400px;
height:400px;
}
div:nth-child(1) {
background:tomato;
}
div:nth-child(2) {
background:red;
}
div:nth-child(3) {
background:blue;
}
div:nth-child(4) {
background:green;
}
위 코드를 작성한 후, 출력하면 위와 같은 결과를 얻을 수있습니다. 그럼 위 div들을 가로열배치 및 가운데로 오도록 정렬시켜보도록 하겠습니다. 코드는 다음과 같습니다.
body {
display:flex;
justify-content:center;
}4개의 div들의 부모요소는 body입니다. body에다가 display flex값을 주셔야 하며, 추가적으로 justify-content를 넣어주시게 되면 4개의 모든 div들이 가운데로 정렬됩니다. 여백을 주고싶으신 경우는 margin값을 넣어주면 되겠죠. 출력은 다음과 같습니다.
위 이미지를 보시면 가운데 정렬된 4개의 div들을 볼 수있습니다.
div 태그 숨기는 방법
div 태그를 숨기는 방법은 굉장히 간단한데요. 코드는 다음과 같습니다.
div {
display:none;
}
div {
opacity:0;
}첫번째의 경우는 페이지에서 아예 보이지 않도록 숨기는 것이며, 블럭자체가 사라진다고 보시면 되겠습니다. 그리고, 제가 임의로 div라고 적었습니다만, 위 처럼 똑같이 적용하시게 되면 모든 div들이 사라지는 현상이 발생하니, 각 div에 알맞은 클래스 속성을 부여해서 display none 값을 넣어주시기 바랍니다.
두번째로는 투명도 처리를 0으로 한 것입니다. 색상자체가 0이되어버렸으니, 해당 div는 보이지않는 상태가 됩니다. 하지만, 이에 대해 치명적인 단점은 그 블럭은 살아있는 상태라는 것이며, 공백 부분으로 처리됩니다.
마치며
이 외에도 매우 다양한 정보들이 있습니다만, 시간이 없는 관계로 여기까지 하도록 하겠습니다. 이 외 궁금한 내용들은 댓글 달아주시면 하나하나 자세히 알려드리도록 하겠습니다. 이상입니다.
