다시 새롭게 시작하는 HTML_CSS

2022. 12. 6. 19:37ㆍHTML_CSS

국비로 공부하는 웹 개발 (스파르타 코딩) 처음은 HTML과 CSS에 대해 간단하게 공부하였습니다.

"HTML은 뼈대, CSS는 꾸미기"

 

HTML은 크게 head와 body로 구성된다. 

head 안에 페이지 속성 정보를

body 안에는 페이지의 내용을 담는다. 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

-기본적은 html의 모습.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .title{
      color: green;
    }
  </style>
</head>
<body>
  <h1 class="title">안녕하세요.</h1>

</body>
</html>

-css는 head 안에서 <style> 태그 안에서 만들 수 있다. 

style을 지정하려면 태그에 이름이 필요하다. 

 

.mytitle > button {
  width: 200px;
  height: 50px;
    
  border: 1px solid white;
  margin-top: 10px;
}

->css 응용 모습. mytitle 안에 있는 button의 css 적용 방법

.mytitle > button:hover {
  border: 2px solid white;
}

 ->css 다른 모습. button위에 마우스 커서가 올라갈 때 적용되는 방법이다.

 

-html과 css는 외우는 게 아닌 사용 할 때마다 찾아서 사용해도 된다.

 

*자주 사용되는 css 

background-image: url("주소");
background-size: cover;
background-position: center;

->배경 이미지를 가운데로 배치하는 방법

.wrap{
    margin: auto;
    width: 300px;
}

-> css 덩어리를 페이지의 가운데로 배치하는 방법

 

 

*코드 정렬 방법

윈도는  ctrl+alt+L

맥은 cmd+alt+L

 

 

'HTML_CSS' 카테고리의 다른 글

css에서 width를 이용한 모바일 창 크기 화면 조정 방법  (0) 2022.12.07
폰트 html에 추가하고 전체 적용하기 _구글폰트 이용하기  (0) 2022.12.06
완성된 연습용 홈페이지 _1 라푼젤에 관하여 (HTML, CSS)  (0) 2021.07.21
메뉴 옆에 내용 배치하기, overflow, position,gif, 유튜브 영상 삽입하기  (0) 2021.07.21
CSS _ 왼쪽 세로 메뉴 만들기 ,o1 숫자 없애기, a 스타일 적용  (0) 2021.07.20

관련글

티스토리툴바