위코드 사전스터디 (자기소개)

Moolbum·2021년 9월 28일
2

위코드

목록 보기
2/8
post-thumbnail

자기소개 페이지

1주차 과제가 시작되었다. htmlcss를 사용하여 자기소개 페이지를 만드는 과제다.
자유롭게 구성하면 되고 과제제출은 깃허브에 공유한 링크를 전달하면 되었다.
과제제출과 함께 개인공부는 꾸준히 계속 하는것이 좋다고 참고사이트를 공유해주었다.
이번주 공부는 html, css를 복습하기로 계획하였다.

자기소개 페이지는 정보를 최대한 보여주며 심플하게 만들고 싶었다.
컬러는 애플홈페이지의 컬러를 참고했다.
https://moolbum.github.io/introduce/

첫 사전스터디 모임에서 자기소개서를 만드는 동안 각자 어려웠던 점을 이야기 했다.
나는 화면을 줄이면 우측배경컬러가 잘리는걸 이야기했다.
display: flex;
display: grid;

사용해보는 것이 문제해결이 될 것 같다고 조언을 해주었습니다.

상단 프로필구간은 flex 속성으로 바꾸고
메인 레이아웃은 grid 속성을 사용하였다.

#topWidth .name {
    width: 100%;
    padding-top: 50px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.listWidth {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 300px;
    padding-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 120px);
    gap: 20px 5px;
    place-content: center;
    justify-content: center;
}

HTML 복습하기

생활코딩 html 유튜브 재생목록
https://www.youtube.com/watch?v=OGFgdro160I&list=PLuHgQVnccGMDUzDDCKW-pCZQY-MMCX5yB&index=3****

ex) 아이디 정보를 서버로 전달하는 방법

  <form action="http://localhost/method.php" method="POST">
    <input type="text" name="id">
    <input type="password" name="pwd">
    <input type="submit">
  </form>

method 전달방법
get : url 전달방법 (기본값)
post : 정보를 숨겨서 전달 (form태그 사용시 대부분 사용)
프론트엔드 : 서버관리자가 원하는 전달방법으로 전달

<head>
    <meta charset="utf-8">
    <meta name="description" content="생활코딩의 소개자료"> 설명
    <meta name="keywords" content="코딩,coding,생활코딩,프로그래밍,html,css"> 키워드정리
    <meta name="author" content="egoing"> 저자
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 화면크기
</head> 

meta태그의 다양한 사용방법
name="description" 은 이 문서의 대략적인 설명을 서술하고 구글검색엔진에도 반영된다.
name="keyword" 는 문서의 키워드를 입력하면 구글검색엔진에 반영된다.
name="viewport" content="width=device-width, initial-scale=1.0"
이 문서의 화면크기는 디바이스 화면크기며 배율은 1배율로 하는것

profile
Junior Front-End Developer 👨‍💻

0개의 댓글