Developer Camp[Fastcampus NKLCB] 2021.07/2021.07~ FastCampus 네카라쿠배2기16 2일차 : CSS float과 clear Float float을 이용해서 아래와 같은 형태를 만들 수 있다. 좌측 이미지 부분이 될 박스는 float: left로 띄운 것이고 이미지 아래의 Lorem 부분은 새로 div로 감싸주고 clear:left 속성을 주었다. float:left를 지워준다는 뜻으로 clear: left를 줘서 위 이미지 박스부분에서 주었던 float: left를 지워준다. 만약, 위 이미지박스에서 float:right를 주었었다면 clear:right로 지워준다. ✅ 만약 다음 요소에 clear를 사용해서 float을 해제해주지 않는다면 어떤일이 벌어질까? 아래 이미지처럼 겹쳐져서 나타날 수 있다. 이 현상을 해결하려면 마지막에 추가한 노란색 박스에다가 clear:left를 줘서 float을 해제해준다. 많이 사용하는 방.. 2021. 7. 13. 2일차 : CSS display, overflow, line-height, font-family, 색상 Display block과 inline은 설명 생략. inline-block은 inline이지만 block처럼 크기를 가질 수 있고 패딩. 마진값을 가질 수 있게 한다. Overflow 기본값은 visible. 넘친 부분을 자르지 않고 그대로 보여준다. hidden : 넘친 부분 잘라내고. 보이지 않게 한다. scroll : 넘친 부분 잘라내고. 스크롤 내리면 볼 수 있다. auto : 넘친 부분이 있을 때만 잘라내고. 스크롤 내리면 볼 수 있다. (넘치지 않으면 스크롤이 없다.) Line-height 값 자체를 명시해줄수도 있지만 폰트 크기에 비례해서 2배 커지고 싶다고 하면 단순하게 lineheight: 2; 를 적어주면 된다. 일반적으로 1.4 ~ 1.7 배수 정도를 추천한다. Font-family.. 2021. 7. 13. 2일차 : CSS reset, 단위, 박스모델, 마진(중복), 패딩, box-sizing RESET reset.css cdn으로 구글에서 검색해서 첫번째 링크에 들어간 뒤 해당 파일을 copy HTML한다. 내가 만든 css에는 불러온 링크 그 다음줄에 입력해야 덮어쓰기로 내가 원하고자하는 CSS가 나온다. 단위 %는 부모요소를 기준으로 영향 받는다. em은 자기자신의 폰트 사이즈에 영향을 받는다. 예로 font-size가 10px일 때 width를 60em으로하면 600px이다. 추가로 부모에서 font-size를 10px했을 때 자식요소에서 font-size를 2em으로하면 2배가 되서 20px이다. rem태그는 html에 font-size만을 영향받아서 가져온다. 관리하기 어려울 때 이 방법이 좋다. 용이하게 사용하려면 html태그에 font-size를 10px로 했다고 가정했을 때 b.. 2021. 7. 13. 2일차 : CSS import, 선택자 CSS 내부에서 CSS를 가지고 오는 방법 그런데 문제는 이렇게 불러오는 방식은 직렬호출방식이라 import에 import에 이런식으로 이어서 했다면 순차적으로 호출되어오는데 1초씩 걸린다고 하면 1+1+1 이런식으로 오래걸릴 수 있다. link방식은 병렬방식이라 한번에 불러오는 차이점이 있다. 그렇다고 @import방식을 아예 쓰면 안되는 것은 아니고 이전에 있는 것을 불러온 다음에 불러와야 하고 그 다음에 불러와야 하고 이런식으로 순차적으로 불러와야 하는상황에 쓰일 수 있다. @import url("./common2.css"); 복합선택자 일치 선택자. span태그이면서 orange 클래스인 것을 선택 span.orange { color: red; } 자식 선택자. ul 태그 자식에 .orange 클.. 2021. 7. 13. 2일차 : FORM, INPUT FORM GET 방식은 주소창에 입력한 값이 그대로 노출되서 로그인에 적합하지 않다. (정보를 URL에 담아서 보낸다.) POST 방식으로 해도 완벽하게 숨길 수 없다. 개발자 도구 - network - headers 의 제일 하단에 보면 정보가 입력되있다. 그래서 완벽하게 숨기기 위해는 암호화를 통해서 숨김처리 해야한다. 일반적으로 POST방식을 많이 사용한다. novallidate는 테스트할 때 많이 사용한다. 이메일란에 골뱅이를 안붙여도 로그인을 눌렀을 때 넘어간다. 기본적으로 target="_self"로 되어있어서 로그인을 눌렀을 때 해당페이지에서 변경된다. _blank로 변경하면 새로운 페이지로 로그인페이지가 뜬다. INPUT FORM 태그 밖에서 연결하려면 id, form을 연결해야 한다. n.. 2021. 7. 13. 2일차 : 테이블 테이블 table tr th, td table은 block요소와 유사, tr은 줄, th와 td는 칸 테이블의 제목은 caption으로 설정 테이블 기본예제 1 table.html 타입 값 a 1 b 2 table.css table { border-collapse: collapse; } th { border: 1px solid red; padding: 10px; background: lightgray; } td { border: 1px solid red; padding: 10px; } 테이블 가로로 만들고 rowspan을 이용해서 2행을 하나로 합치고 id, headers를 사용해서 헤더에 연결해주기 caption과 colgroup, col 사용예제도 함께 본다. 데이터와 값 /* */ 데이터 타입 알파.. 2021. 7. 13. 이전 1 2 3 다음
