ACHO.pk devlog

[멋쟁이사자처럼10기] Html/CSS를 이용한 자기소개 만들기 본문

멋쟁이사자처럼

[멋쟁이사자처럼10기] Html/CSS를 이용한 자기소개 만들기

Acho 2022. 4. 3. 16:35

음멋쟁이 사자처럼에서 제공하는 코드라이언으로 서울여대 정기세션 첫 시간 때 Html과 CSS를 학습했다.
작년에 Html과 CSS 전공 시험을 본 적이 있기 때문에 수월할 것이라 생각했는데, 전혀 아니었다. 학교 시험을 보기 위해 공부하는 것이 아니라 내가 웹 개발을 하기 위해 공부하는 것이다보니 확실히 배워가는 것이 달랐다.

 

일단, 이번 정기세션을 통해 html 문서의 가독성은 css로 높여야 함을 다시 한 번 깨달을 수 있었다. html 문서에 코드를 욱여넣을려고 하지 말고, css를 적극 활용해보자 !!

html 문서의 기본 골격

 

    tip : html 파일에서 !+tap을 누르면 자동으로 위의 html 문서 골격 기본 형식이 생성된다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1></h1>
        <p></p>
    </body>
</html>

<html></html> : html 문서임을 알려주는 태그

<!DOCTYPE html> : <html> 태그와 함께 사용

<head> : html 문서의 부가 정보로 내용물에 대한 추가 정보가 들어감

<body> : html 문서의 Contents로 html에서 사용되는 모든 내용이 들어감

<head>에 들어가는 기본적인 태그

  • <meta charset=”UTF-8”> : 한글 출력의 위한 태그
  • <title> : 브라우저 상단에 글을 표시하기 위한 태그

<body>에 들어가는 기본적인 태그

  • <footer> : 화면 맨 아래 쓰여지는 안내문 (ex) 저작권 명시) - <p>태그 처럼 일반 글자로 출력됨
  • <p> : paragraph의 준말(문단을 의미하는 기본 태그) → 일반적으로 쓰는 모든 글을 <p>태그로 묶음
  • <h1> : heading 1을 의미 - 가장 큰 헤드라인 (h2, h3, h4...)
  • <img src=” “> : 이미지 파일을 삽입
  • <a href = “URL”> </a> : 링크된 페이지의 URL을 명시 - <img src=” “> 등의 태그를 안에 넣어 클릭하면 특정 페이지로 이동 가능
  • <div> : division의 준말 - 구역 나누기

 


Html과 CSS 연결하기

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="파일이름.css">
    </head>


CSS 기본
코드형식) 속성이름: 속성설정;

#css
.abc {

}
# html 문서
<태그 class = "abc">
	
</태그>
  • text-align 속성 : 정렬text-align: center; (중앙 정렬)
  • text-align: right; (오른쪽 정렬)
  • text-align: left; (왼쪽 정렬)
  • background-color 속성 : 배경색background-color: #1e1e1e; (color code로 지정 - google 검색 : ‘html color code’ )
  • background-color: black; (색깔 이름으로 지정)
  • color 속성 : 글자색color: #919191; (color code로 지정)
  • color: white; (색깔 이름으로 지정)
  • font-size 속성 : 글자 크기
  • font-size: 30px; (px : pixel=picture element, 모니터 화면을 구성하는 최소 크기)
  • font-weight 속성 : 폰트 두께font-weight: light; (얇게)font-weight: bold: (두껍게)
  • font-weight: normal; (보통)
  • font-weight: lighter; (제일 얇게)
  • font-style 속성 : ex) font-style: italic; (이텔릭체)

 

 아래 링크로 들어가면 웹페이지로 볼 수 있다.

https://acho.netlify.app/

 

About Acho

Java Discord notification Bot web, algorithm, major course

acho.netlify.app

 

이건 내가 만든 자기소개 최종본이다!!!

 

해당 코드는 아래 링크로 ~ !!

 

https://github.com/Acho-mj/Likelion10-study/tree/main/my%20resume2

 

GitHub - Acho-mj/Likelion10-study: 멋쟁이 사자처럼 10기 백엔드입니다. 코드라이언과 학교 멋사 스터디

멋쟁이 사자처럼 10기 백엔드입니다. 코드라이언과 학교 멋사 스터디에서 학습한 내용을 올립니다. - GitHub - Acho-mj/Likelion10-study: 멋쟁이 사자처럼 10기 백엔드입니다. 코드라이언과 학교 멋사 스

github.com

 

'멋쟁이사자처럼' 카테고리의 다른 글

[멋쟁이사자처럼10기] Python_API를 이용해 날씨 정보 받아오기  (0) 2022.05.01
[멋쟁이사자처럼10기] Python 크롤링으로 뉴스 기사 제목 추출하기  (0) 2022.05.01
[멋쟁이사자처럼10기] Html/CSS로 나만의 이력서 만들기  (0) 2022.04.11
[멋쟁이사자처럼10기] Python 리스트 딕셔너리 심화  (0) 2022.04.10
[멋쟁이사자처럼10기] 멋쟁이사자처럼 서울여대 서류/면접 최종합격 후기  (1) 2022.03.16
'멋쟁이사자처럼' Related Articles more
Comments