philip_shin

webucks

Thu, 26 Aug 2021 16:19:23 GMT

스타벅스 클론코딩

첫 개인 프로젝트인 스타벅스 클론코딩이다. HTML, CSS, JS를 이용 나만의 페이지를 구현해야한다.

Mission 1 로그인 페이지 레이아웃 구현

코드를 작성하세요.
로고는 아래 둘 중 하나의 조건을 만족시켜주세요.
img 태그를 사용하여 로고를 이미지 파일로 제작
이 폰트를 사용하여 로고를 만들어야 합니다(기본 폰트가 아니라 구글 폰트에 있는 원하시는 다른 폰트를 사용해도 무관합니다).
다음 요구사항에 맞게 HTML을 작성해주세요.
HTML을 작성할때는, 항상 디자인된 화면을 보면서 해야합니다.
아래 이미지를 보고 레이아웃을 완성해주세요.
로그인 박스 전체를 감싸고 있는 div 혹은 section 태그가 필요합니다.
form 태그를 활용해주세요.
input 태그를 사용하여 아이디, 비밀번호를 입력하는 창을 구현해주세요.
input의 타입은 각각 text 혹은 password입니다.
input의 속성으로 placeholder가 있습니다. 해당 속성을 사용하여 "전화번호, 사용자 이름 또는 이메일" 등의 값을 넣어주시면 됩니다.
로그인 버튼은 button 태그를 사용해주세요.

내가 구현해본 HTML



    
        
        
        
        WeBucks
        
        
        
        
        
    
    
        
            WeBucks
            
                
                
                
            
            비밀번호를 잊으셨나요?

내가 구현해본 CSS

*{
    box-sizing: border-box;
}
body {
    background-color: #edefef;
    display: flex;
    justify-content: center;
}

h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 120px;
}

.loginall {
    width: 530px;
    height: 650px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

form {
    display: flex;
    flex-direction: column;

}

input {
    height: 30px;
    margin-bottom: 15px;
    width: 300px;
    height: 40px;
    border: 1px solid black;
    border-radius: 10px;
    background-color: #F7F7F7;

}

button {
    margin-bottom: 70px;
    background-color: #AED3EA;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.5;
    border-radius: 5px;
    height: 40px;
    color: white;
    border: 0px;
}

문제풀이는 끝났고 이제는 실전연습 ! 미션도 앞으로 거쳐가야할 프로젝트도 아직 많이 남았지만 어떤 고통과 즐거움이 있을지 기대된다

레이아웃의 모든 것

Sun, 22 Aug 2021 14:32:01 GMT

1. position 속성 - relative, absolute, fixed

relative

position : relative;

이 자체로는 특별한 의미가 없기 때문에 위치에 변화는 없다. 위치를 이동시켜주는 top,right,bottom,left프로퍼티가 있어야 원래의 위치에서 이동할수가 있다.

absolute

position : absolute;

이름대로 절대적인 위치에 둘 수 있다. 특정 부모에 대해서 절대적으로 움직임을 따르게된다. 부모 중에 position이 relative,fixed,absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position:relatve를 부여해주면된다.

fixed

position : fixed;

말그대로 고정시키겠다는 의미이다. fixed는 부모선택자도 필요없이 원하는 요소를 화면에 고정시킬 때 쓰는것이다. 설정을 해두면 눈에 보이는 브라우저 화면 크기 만큼 화면 내에서만 움직인다. right:0; 으로 해두면 오른쪽에서 0떨어져있다는 의미로 오른쪽에 딱 붙어있게된다.

2. inline, inline-block, block 에 대해서

block
- 요소들이 수직 방향으로 하나씩 쌓인다.
- 너비와 높이를 가질 수 있다.
- 100%의 너비를 가진다.
inline
- content가 포함하고 있는 내용만큼만 너비를 차지한다.
- 줄바꿈이 일어나지 않는다.
- 너비와 높이를 가질 수 없다. (height, width)
- margin과 padding이 가로 방향으로만 적용된다.
inline-block
- inline 같은 외관을 가지고 있지만, block 같은 특징을 가지고 있다.
- [Like inline]
  - content의 크기만큼만 공간을 차지한다.
  - 줄바꿈이 일어나지 않는다.
- [Like block]
  - 너비와 높이를 가질 수 있다.
  - margin과 padding을 적용할 수 있다.

3. float에 대해서

"float"란 떠오르다라는 의미를 가지고 있다. 신문 레이아웃에서 볼 수 있는 것처럼 텍스트 내부에 float하는 이미지를 포함하고, 해당 이미지의 좌우측 주변으로 텍스트를 둘러싸는 레이아웃을 구현할 수 있다.

Float와 함께 사용하는 clear 레이아웃이 겹치지 않도록 영역을 비운다. 텍스트와 이미지의 높이가 동일하지 않을 때, 튀어나온 단락에 clear 속성을 추가하여 정리할 수 있다.
Float와 함께 사용하는 overflow 상자 밖으로 유출되는 contents를 hidden/scroll/visible 할 수 있다.

Semantic Web & Semantic Tag

Sun, 22 Aug 2021 13:26:46 GMT

Semantic Web

Semantic Web이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

Semantic Tag

HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.

non-semantic 요소

div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

semantic 요소

form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.

사용하는 이유?

검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다. 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다. 개발자에게 태그 안에 채워질 데이터 유형을 제안한다. 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영한다.