[HTML,CSS기초]4-2.디자인 추가하기

4679 단어 코드메이트코드메이트

결과물

주요 코드

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="펭수style.css">
  </head>

: <head>태그에 css파일을 링크해줬다.

div{
  background-color: yellow;
  text-align: center;
  color: red;
}

: 제목은 <div>태그로 묶여있으므로 text-align: center; 로 가운데 정렬 하였다.

p{
  text-align: center;
}

: <p>태그 또한 text-align: center; 로 가운데 정렬하였다.

img{
  display:block;
  margin:auto;
}

: <img>태그는 위와 같은 방법으로 가운데 정렬 할수있다.

<p><a href="https://www.youtube.com/channel/UCtckgmUcpzqGnzcs7xEqMzQ" target="_blank"><span>보러가기</span></a></p>

:<a>태그를 정렬하는 방법은 <div>태그로 묶어서 정렬하는게 편하지만 그러면 글씨부분만 배경색이 지정되는게 아니라 줄 전체에 배경색이 지정된다. 따라서 <a>태그를 <p>태그로 묶어서 단락을 지정하여 <p>태그에 가운데정렬을 설정하고, "보러가기" 글씨만 <span>으로 묶어서 배경색을 지정한다.

TIL1. Git? Github? 대체뭐야?
[HackerRank] Non-Divisible Subset

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage