HTML, CSS 기본사항 문제

1. 문제 : div, section, article 태그를 사용해서 3가지 색의 막대 생성

// HTML
<div></div>
<section></section>
<article></article>


// CSS
div {
  background-color: green;
  height: 50px;
  display: block;
}

section {
  background-color: red;
  height: 50px;
  display: block;
}
article {
  background-color: black;
  height: 50px;
  display: block;
}

 

2. 문제 : section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 설정 (display: inline-block 사용)

// HTML
<div></div>
<section></section>
<article></article>


// CSS 
// display:inline-block 사용하여 옆으로 표현
div {
  background-color: red;
  height: 50px;
  display: block;
}

section {
  background-color: green;
  height: 50px;
  width: 50px;
  display: inline-block;
}
article {
  background-color: blue;
  height: 50px;
  width: 50px;
  display: inline-block;
}

 

3. 문제 - 글자를 예제와 똑같은 스타일로 만들기

// HTML
<div>안녕</div>
<section>안녕</section>


// CSS
div {
    /* 글자의 두께 조절 */
    font-weight:normal;
    font-weight:bold;
    
    /* 기본폰트의 3배 */
    font-size:3rem;
    font-size:140px;
    
    /* 자간조절 */
    letter-spacing:-10px;
    color:#787878;
}

section {
    font-size:10rem;
    /*
    rgba 함수의 인자
    인자 1(red) : 0 ~ 255 까지 넣어서 실험
    인자 2(green) : 0 ~ 255 까지 넣어서 실험
    인자 3(blue) : 0 ~ 255 까지 넣어서 실험
    인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험
    */
    color:rgba(255,0,0,0.5);
}

 

4. 문제 : 각각의 사이트 명에 링크 설정.(새창으로 떠야하며, 젠코딩으로 진행) (a hrf="" 사용)

// HTML

<젠코딩>
a[href="https://www.naver.com"][target="_blank"]{네이버로 이동}+br+a[href="https://www.google.com"][target="_blank"]{구글로 이동}+br+a[href="https://daum.net"][target="_blank"]{다음으로 이동}
해당사항 한줄로 입력 후 끝에서 tab 누르면 자동으로 태그가 생성된다.

<a href="https://www.naver.com/" target="네이버">네이버</a><br>
<a href="https://www.google.co.kr/" target="_구글">구글</a><br>
<a href="https://www.kakaocorp.com/" target="카카오">카카오</a>

 

5. 문제 : 각각의 크기와 색상이 다른 링크 버튼 3개 생성 (div 박스 안 자식요소(a) 사용)

// HTML
<div>
    <a href="http://www.bnx.oa.gg" target="_blank">bnx 사이트</a>
</div>

<nav>
    <a href="http://www.naver.com/" target="_blank">네이버</a>
</nav>

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


// CSS
div a {
    font-size:3rem;
    color:black;
}

nav a {
    font-size:5rem;
    color:red;
}

section a {
    font-size:7rem;
    color:blue;
}

 

6. 문제 : 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 생성 (text-align 사용)

// HTML
<div>
    <a href="http://www.bnx.co.kr/16fw/main/main.asp" target="_blank">bnx 사이트</a>
</div>

<nav>
    <a href="http://www.naver.com/" target="_blank">네이버</a>
</nav>

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


// CSS
div {
    text-align:right;
}

div a {
    font-size:3rem;
    color:black;
}

nav {
    text-align:center;
}

nav a {
    font-size:5rem;
    color:red;
}

section a {
    font-size:7rem;
    color:blue;
}

 

7. 문제 : 100칸 짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 변경되도록 생성 (hover사용)

// HTML
// div*100 tab으로 한번에 생성 가능하다.
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

// CSS
// hover 사용하여 background 색상 변경
div {
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block;
}

div:hover {
    background-color:blue;
}