[오늘의 학습] 211029

---

학습 언어

• HTML, CSS

 

학습 방식

• 온라인 강의 정리('[코드라이언]일단 만드는 HTML/CSS' 강의를 참고하였습니다.)

 

학습 내용

• 학습한 Tag : html, head, meta, link, title, body, div, p, h1, img, a, footer
• Tag class 작성 : 같은 Tag에서 다른 스타일(CSS) 적용시 활용
• 학습한 CSS 속성 : margin, padding, border, width, height, background-color, color, text-align, font-size, font-weight, font-style, box-shadow, float, overflow

정리하고 싶은 내용

① 오른쪽 위치 시키기

<div class="title-box">
    <h1>선구자 치타</h1>
    <p class="name-text">HTML/CSS 개발자</p>
</div>

.title-box {
    text-align: right;
}

• 오른쪽으로 정렬할 Tag들을 <div> Tag로 모아서 text-align 속성 활용한다.
• 글짜뿐만 아니라 포함된 Tag들도 정렬 가능

 

② 같은 줄에서 양쪽 위치 시키기

<div class="float-wrap">
    <p class="title-text">Awesome Programming Company</p>
    <p class="year-text">2020 - Now</p>
</div>

.float-wrap {
    overflow: hidden;
}

.title-text {
    font-size:11px;
    font-weight: bold;
    color: #282828;
    float: left;
}

.year-text{
    font-size:11px;
    font-weight: bold;
    color: #282828;
    float: right;
}

• 한 줄 안에서 <p> Tag들을 양쪽으로 정렬하고 싶을 때, float 속성을 활용한다.
• float 말 그대로 띄워서 정렬하는 방식이기 때문에 그냥 사용하게 되면 다른 영역에 침범하게 된다.
• 침범을 막기 위해 float된 Tag들을 모아서 overflow의 hidden 속성을 활용한다.

 

③ 이미지에 링크 연결하기

<div class="sns-wrap">
    <a href="http://facebook.com"><img class="sns-img" src="images/facebook.png"></a>
    <img class="sns-img" src="images/twitter.png">
    <img class="sns-img" src="images/linked-in.png">
    <img class="sns-img" src="images/insta.png">
</div>

.sns-img {
    width:12px;
    height:12px;
}

.sns-wrap {
    text-align:right;
}

• ①번과 같이 모든 SNS 이미지를 오른쪽 정렬하기 위해 모아서 text-align 속성 적용
• 이미지 클릭하면 사이트로 이동하기 위해 <a>Tag를 활용한다.
• 적용할 Tag를 감싸주고, 'href' 속성 안에 이동할 사이트의 URL을 입력한다.

 

정리

HTML 작성 시, 프로그래밍이 아니라 문서를 만든다고 생각할 것, CSS는 그 문서를 꾸며주는 기능

 

예전에 공부했던 HTML/CSS를 다시 복습하는 시간이었다. HTML/CSS를 공부했던 시간이 꽤 지나서 최근까지 중앙에 배치하는 방법에 대해 많이 고민했었다. 고민했던 방법들이 서로 영역을 침범하는 등 불안한 요소가 자꾸 나타났는데, 강의를 듣게 되면서 잊혀져 있던 기억이 되살아났고, 나에게 확실한 방법으로 익히는 시간이 되었다. margin, padding, border를 두려워하지 않고 자유자재로 잘 사용해야겠다.

 

CSS의 여러 속성들을 알려줬지만, 어렵지 않은 내용이었고, 웹으로 출력하였을 때, 깔끔하고 가독성 좋게 나와서 하나의 디자인 테마를 익히게 되었다. 여러 컨텐츠를 

 

강사님 말씀대로 나중에 이력서 작성을 위해 워드나 한글 파일로 하지 않고 HTML 파일로 준비 해봐야겠다.

 

---

참고

코드라이언 | 손으로 하는 진짜 코딩