whatisthis?

https://user-images.githubusercontent.com/19285811/69063907-43da4800-0a58-11ea-8efb-4b57dca4e3fe.png The most beautiful experience we can have is the mysterious. It is the fundamental emotion that stands at the cradle of true art and true science. — Albert Einstein Feed 우선, 최소한의 기능 단위로 나눠보자. 마크업을 하기 전에 꼭 해야 함! index.html Kimbug 30 min Follow The most beautiful experience we can have is the myste..

Input Group 연습하기! 마크업 부분 나누기. 1. h1과 paragraph Manage Subscriptions You can follow the discussion on @kimbug without to leave a comment. Cool, huh? Just enter your email address in the form here below and you are all set 2. input 태그와 button Subscribe button type = submit 을 이용하여 폼을 제출해야하므로, form 으로 반드시 감싸줘야한다. method는 GET 을 사용한다. https://mywebproject.tistory.com/73 etc) HTTP - GET 방식 vs POST 방식 G..

opacity 속성은 요소의 불투명도를 설정함. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대 개념임. opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않는다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖는다. opacity: 0.4; -> 자식 요소는 불투명하게 유지하고 싶다면 background 속성을 이용하자! background: rgba(0, 0, 0, 0.4); cf> rgba rgb라는 색상정보에 a는 알파 채널값을 부여하여 투명도를 조정 - 자식 요소를 불투명하게 하고싶을 때는 background 속성의 rgba를 이용해야함. opacity는 자식요소에는 상속되지 않기 때문. opacity:..

cursor cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정한다. ** cursor 속성의 속성값으로 올 수 있는 value 키워드 값 cursor: pointer; cursor: auto; URL, 대체 키워드 cursor: url(hand.cur), pointer; URL, 좌표 or 대체키워드 cursor: url(cursor2.png) 2 2, pointer; 전역 값 (Global values) cursor: inherit; cursor: initial; cursor: unset; REFERENCE REF: https://developer.mozilla.org/ko/docs/Web/CSS/cursor cursor - CSS: Cascading Style Sheets ..

GitHub Dropdown Menu Dropdown Menu란? GUI 요소 중 하나. 버튼 클릭이나 터치 등의 상호작용을 통해 활성화했을 때, 보통 그 버튼의 아래로 하위 메뉴들이 펼쳐지는 요소를 말한다. 풀다운 메뉴(pulldown menu)라고도 부른다. 마크업을 하기 위해서 블록단위로 각 부분을 어떻게 마크업 할지 생각해보자. 1. img 부분 이미지처럼 보이지만, 이미지를 누르면 드롭다운 메뉴가 나타나는 동작을 하므로 이미지가 아니라 일종의 버튼(button)임을 알 수 있다. 이미지도 유저의 프로필 사진이라는 의미가 있는 이미지이므로, img 태그를 이용한다. 이때, 버튼의 기능을 명확히 해주기 위해서 aria-label을 사용하는 것이 좋다. button의 필수 속성인 type에는 type..

1. 여러 요소를 동시에 선택 .class1, .class2, .class3 각 선택자마다 쉼표(,)로 구분할 경우 각각의 항목을 OR로 적용함. 즉, class1, class2, class3 모두에 스타일이 적용됨. .class1 .class2 .class3 쉼표 없이 공백으로 구분하여 사용시 뒤에 나온 선택자가 하위 개체로 지정됨. 즉, class1 ㄴ class 2 ㄴ class 3 으로 지정되고, class1 요소 내부의 class2 요소 내부의 class3 요소에만 스타일이 적용됨. .class1.class2.class3 공백 없이 연결해서 지정시 class="class1 class2 class3"에 해당하는 요소에만 스타일이 적용됨. 즉, AND 처리 되는 것. (class1이면서 class2..

Receipt 우선, 마크업을 하기 위해서 블록으로 크게 나눠보자. 우선, 제목에 해당하는 부분을 전부 h1태그로 입력하고, 아래 'from kimbug'같은 경우에는 다르게 되어있으므로 디자인 처리를 하기 위해서 으로 해준다. -> span은 div와 같이 디자인을 위한 요소이고, 아무런 의미도 기능도 없다. span은 인라인(글자) 단위이고, div는 블록단위라는 차이가 있다. Bill sharing request from Kimbug 그리고, 디자인적인 요소를 전체적으로 주기 위한 'receipt' 클래스를 미리 부여한다. ** TIP ** emmet 기능을 이용해서 .class명만 입력하면 div를 생성할 수 있다! McDonald's 24.06.20xx 가장 먼저, McDonald's는 위에서 ..

Instagram User profile 마크업을 위해서 img 태그 / 내용 부분을 나눠서 어떤 태그로 나타낼지 구상해보자. 태그에 대한 내용을 다시한번 복습해보려면? 정의 리스트 Description List (dl) 은 중요하지 않게 생각할 수 있는데, 굉장히 유용한 리스트임. 1. 용어를 정의할 때 Syntax 학습(學習) 1. 배워서 익힘. 2. 험의 결과로 나타나는, 비교적 지속적인 행동의 변화나 그 잠재력의 변화. 또는 지식을 습득하는 과정. ● dt = discription Term ● dd = discription Data ** dt 대신 dfn(definition)을 사용하기도 함. - [정의]를 할거라는 늬앙스의 의미임. - 하나의 term에 여러개의 data 가능. - 여러개의 te..

REF: https://www.nextree.co.kr/p8468/ CSS: 선택자(Selector) 이해 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우 www.nextree.co.kr 1. 선택자 (Selector) - 선택을 해주는 요소. 이를 통해 특정 요소들을 선택하여 스타일 적용 가능. 수정중 수정중 수정중 수정중 수정중

display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가진다. .container { display: inline-flex; } 즉, 일반 flex는 flexbox끼리 위아래로(상하)로 쌓이지만, inline-flex는 좌우로 쌓인다. 여기서 '쌓인다'는건 flex box ,즉 겉부분인 container를 의미함. flex box 안에 item을 쌓는건 flex-direction속성임. 두 값의 차이는 내부에 Items에는 영향을 주지 않음. REFERENCE https://developer.mozilla.org/ko/docs/Web/CSS/display display - CSS: Cascading Style Sh..