웹개발 기초

웹개발 종합반 1

열심히 해 2024. 8. 27. 16:18
  • html 파일 생성하기: vscode 에서 폴더 선택, 새 파일 "파일이름.html" 이후 코드 첫줄에 "html:5" 또는 "!"
  •  
  • 줄바꿈 : <br> : break ,닫는 태그인 </br>을 사용하지 않아도 된다.
    <p>문단 구분</p> : paragraph 
    <pre> 입력 그대로 </pre> : preformatted 
        <div>
            1안녕하세요,
            <br>사람입니다.
            <p>2안녕하세요</p><p>사람입니다</p>
            <pre>3안녕 하 세 요!! 사람
                입니다
            </pre>
        </div>
    .... '입니다'가 왜 저렇게 나올까?

  • text-align: center;
    <style></style> 내 css. 문자를 가운데로 정렬함.

  • 필요할 때 검색하며 사용하는 css
    1. 배경관련
    background-color : 보통 구역의 크기를 확인하게 위해 사용
    아래 세 줄은 같이 다님.
    background-image: url('');
    background-position: center;
    background-size: cover;

  • 2. 사이즈
    width
    height
    3. 폰트
    font-size
    font-weight
    font-family color
    4. 간격
    margin : 범위 구역 밖으로의 여백.
      margin: 5px auto 0px atuo;
      -> 시계방향으로 상우하좌. 5px위로 auto우로 끝가지 0px 아래로 atuo좌로 끝까지, padding도 마찬가지.
    padding : 범위 구역 안으로의 여백. 
      -> 시계방향으로 상우하좌. padding: [top] [right] [bottom] [left];
    5. 모서리
    border-radius: 모리서를 필셀만큼 둥글게
    border-radius: 8px


  • 이미지 삽입 : <body>내에서
    <img src="./ddd.jpg" width="500" height="500">
    같은 위치(경로)에 이미지 파일(ddd.jpg)이 있을 때 사용하며 폭과 높이 조절 가능

    사진을 넣는다면 사진 크기와 동일하게 div의 폭을 사진과 같게 한다. 이렇게 하고 margin을 쓰면 사진을 페이지 내에서 원하는 위치로 옮기기 쉬워진다.

  • 구글 폰트 가져오기 :
    1. https://fonts.google.com/?subset=korean 에서 원하는폰트 고르기
    2. 내려서 'Regular 400' 으로 설정. 이후 'Get font' -> 'Get embed code' -> @import

 

       3. <style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Sunflower:wght@300&display=swap');
</style>  -> 스타일 안에 @import ~ 넣는다.
       4. 적용시킬 크
.sunflower-light {
  font-family: "Sunflower", sans-serif;
  font-weight: 300;
  font-style: normal;
}