[코코아톡] 챌린지 7일차 / flex-wrap 유용하네..
·
Dev/HTML5 CSS3
어제는 하루종일 알바하느라 공부 못했음,, ㅠ.ㅠ
[코코아톡] 챌린지 6일차
·
Dev/HTML5 CSS3
key point div태그 안에 3개의 div를 만들어서 내부 박스를 만든 후, 큰 박스 내에서 3개의 작은 박스를 정렬하려면 큰 박스 div에 flex를 해줘야하는데, (큰 박스를 정렬하기 위해 body에 flex를 하고, 큰 박스 div에도 flex를 해주었다.) 그러면 block이 inline특성을 가지기 때문에 수평으로 나란히 정렬된다. 그렇기 때문에 그림처럼 수직으로 정렬하기 위해서는 flex-direction: column을 해줘야한다. media query 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법 스크린 사이즈에 따라서 보여지는 CSS를 다르게 할 수 있다. @media screen and (min-width:200px) and (max-width: 400px) and(..
[코코아톡] 챌린지 5일차 / position, pseudo selectors
·
Dev/HTML5 CSS3
div{top: 5px position:fixed} 스크롤해도 똑같은 자리에 있게함 다른 요소 신경안씀 top left right bottom 중 하나만 수정해도 다른 레이어가 되고 가장 위의 레이어가 됨 웹사이트 메뉴 만들때 씀 opacity:0.5 투명도 설정? position:static; default값 position:relative; top left right bottom 과 함께 씀 top:-10px left:-10px 아주 조금 위치를 옮길때 처음 위치한 곳을 기준으로 수정함! position:absolute; top:0px 맨 오른쪽 왼쪽 위 아래로 감. 부모 태그와 상관없이 옮겨짐 더 구체적으로 설명하면 부모 엘리먼트에서 position:relative 가 있는 기준으로 위치가 옮겨지고..
[코코아톡] 챌린지 4일차 / inline, block, flex, collapsing margins
·
Dev/HTML5 CSS3
head안에 넣어서 html과 css를 연결시킴 font-weight font-style:italic text-align: center inline 종류 : span, a, image inline -> block 으로 바꾸기 span {display: block;} block을 inline으로 바꾸기(width와 height를 가진) div {display: inline-block;} : default값에 문제가 많음... 빈 공간 문제, 정해진 형식이 없음 inline-block은 responsive disign 반응형 디자인을 지원하지 않음 ->flex 사용 flexbox 3가지 규칙 1. 자식 엘리먼트(div)에게는 어떤 것도 적지 말아야한다. 부모 엘리먼트(body)한테만 명시해야함. 1 에서 b..
[코코아톡] 챌린지 3일차 / meta, label, input, semantic HTML
·
Dev/HTML5 CSS3
: 새 창에서 열기 default는 target="_self" 구글이 사이트에서 description을 가져옴 브라우저한테 텍스트를 어떻게 그려달라는지 말해줌 (글자깨짐방지) blah blah : 타자기같이 써짐 ~~ : 마우스 올렸을때 글자가 나타남 blah semantic HTML 긴텍스트 짧은텍스트 © 2022
[코코아톡] 챌린지 2일차 / HTML, CSS 간단한 정리
·
Dev/HTML5 CSS3
[HTML] 주석 제목 ~ : heading 본문 : paragraph 하나의 단락 만들기 : 줄바꿈 : 수평 줄 blah : 빈 링크만들기 blah : id="apple" 속성을 가진 태그로 이동하기 id속성은 중복되면 안 된다. 중복된다면 먼저 나오는 태그로 이동한다. 글자형태-> 스타일시트로 처리하므로 최근에는 잘 사용안함 목록 unordered list ordered list list item 테이블 : 행 : 제목 셀 : 일반 셀 제목1 제목2 data1 data1 data2 data2 이미지 오디오(비디오) 입력양식 이름 공간분할 : block형식 : inline형식 시맨틱구조 태그 = div태그와 같은 기능 : 헤더 : 내비게이션 : 사이드에 위치하는 공간 : 여러 중심 내용을 감싸는 공간 ..
[코코아톡] 챌린지 1일차 / HTML 공부 중!
·
Dev/HTML5 CSS3
다 맞았다!!!! 뿌듯허네 나는 퀴즈가 제한시간이 있을 줄 알았는데 그런건 없었고.. 마감시간까지 딱 1번만 제출 가능한 조건이었다 html 강의를 듣는데 이건 내가 직접 코드를 짜보고 웹페이지에 어떻게 출력되는지 확인하는 작업을 계속 반복해야할 것 같다. 계속 반복해서 내 것으로 만들어야지,, 그리고 책이랑 강의랑 병행하는거 좋은 것 같다! 강의는 뭔가 이거했다가 저거했다가 좀 정리가 안되는 느낌?인데 책은 좀 더 순서대로 따라가기 좋다. 대신에 책은 좀 지루하다는점..? 장단점이 있다..!
[코코아톡] 노마드코더 클론코딩 신청!
·
Dev/HTML5 CSS3
노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co 지금 책으로 HTML CSS 공부하는중인데 이렇게 종이책으로 진도를 나가다는 흐지부지 될 것 같다는 생각이 들었다.. 그리고 뭔가를 구현해보고 싶은 마음이 드는데 너무 막연?하다고 해야되나??? 그래서!! 인터넷 강의의 도움을 받기로 했다.. 하핳 노마드코더에 정말 다양한 강의가 있었는데 그중에 코코아톡 챌린지가 가장 눈에 띄었다! 왜냐면 나는 찐 카카오톡을 쓰면서 불편한점이 있었는데..!! 이 챌린지를 해보면 더 빨리 구현해볼 수 있지 않을까?? 생각했다..근데 이 챌린지의 지난 결과를 보면 거의 10퍼센트밖에 통과를 못했다.. 그만큼 어..