웹개발 종합반 1주차

HTML 및 CSS 기본 내용

HTML은 형태를 나타내고 body에 작성

CSS는 HTML의 형태를 꾸며주는 역할로 head에서 style 혹은 별도ccs파일로 사용

기본 적인 CSS 라이브러리로는 Bootstrap이 있다.

 

기본적인 CSS 형태

/* 전체 페이지 적용 */
* { 
  margin: 0; 
}

/* 해당 클래스 적용 */
.title { 
  /* 배경관련 */
  background-color: #111;  /* 배경색 */
  background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');  /* 배경 이미지 */
  /* near-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 배경 이미지 URL앞에 넣으면 이미지 어둡게 적용가능*/
  background-size: #cover;  /* 배경 크기 */
  
  /* 사이즈 */
  width  /* 너비 */
  height  /* 높이 */
  
  /* 폰트 */
  font-size  /* 글자 크기 */
  font-weight  /* 글자 굵기 */
  font-family  /* 글꼴 설정 */
  color  /* 색상 */
  
  /* 간격 (위치 지정안할 경우 순서 대로 위 오른쪽 아래 왼쪽순, auto시 자동 맞춤) */
  margin-right: 10px;   /* 바깥 여백 */
  padding: 30px auto 0px auto;  /* 안쪽 여백 */
  
  /* 내용물 정리 */
  display: flex; 
  flex-direction: column;  /* 정렬 방식 */
  align-items: center; /* 열 정렬 위치 */
  justify-content: center; /* 행 정렬 위치 */
  
  /* 그림자 박스 표현 */
  box-shadow: 0px 0px 3px 0px gray; 
  
  /* 모서리 곡선 */
  border-radius: 10px;  
}

/* 해당 클래스안의 버튼 */
.title > button { 
  border: 1px solid white;
}

/* 해당 클래스안의 버튼을 마우스 오버시 */
.title > button :hover{ 
  border: 2px solid white;
}

 

CCS 파일 사용

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

 

부트스트랩 사용

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

부트스트랩을 사용 시 링크와 스크립트를 추가해주어야 한다. (부트스트랩 사이트에서 복사할 수 있음)

이후 사용하고 싶은 형태의 코드를 복사하여 수정해서 사용하면된다.

 

GitHub

중요한 내용으로 업로드 및 배포에 관해서 별도로 알아볼 예정!

 

단축키(윈도우 - 리눅스)

• 주석 : Ctrl + / = Command + /
• 줄정렬 : Shift + Alt + F = Shift + Option + F
• 줄복사 : Shift + Alt + 아래방향키 = Shift + Option + 아래방향키
• 줄이동 : Alt + 방향키 = Option + 방향키

참조 사이트

부트스트랩 : https://getbootstrap.com/

Bootstrap

깃허브 : https://github.com/

GitHub: Let’s build from here

구글 폰트 : https://fonts.google.com/

Browse Fonts - Google Fonts