분류 전체보기

무료 이미지 사이트

이미지나 아이콘들을 사용해야할 때가 많은데 구글에 있는 이미지를 바로 쓰면 저작권 위배 될 이미지가 수도 없이 많기에 꼭 중요한 저작권 무료인 이미지를 사용해야합니다. 그래서 저작권 무료 이미지 사이트들을 모아봤습니다. unsplash - https://unsplash.com/ Beautiful Free Images & Pictures | Unsplash Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. unsplash.com pexel - https://www.pexels.com/ko-kr/ flaticon - https://w..

TIL :: 마진 병합 현상

마진 겹침 현상 (margin collapsing) 이란? 1. 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상 2. 요소와 요소의 사이가 인접한 경우 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 때 더 높은 값의 마진 값이 적용되는 현상 A B parent라는 div안에 child가 두 개가 존재한다고 생각해보자. .parent{ width: 300px; margin: 0 auto; background-color: #0A174E; } .child{ width: 200px; height: 200px; background-color:#F5D042; color: rgba(255, 255, 255..

[CSS] reset.css 그리고 common.css

💡 reset.css 꼭 해야할까? 많은 브라우저들과 각 브라우저별 스타일이 다르다! 하나의 브라우저에서만 지원할 수 없기에 브라우저별 다른 스타일을 동일하게 맞추고 css가 적용될 때 동일한 효과가 적용되기 위해 사용한다. 왼쪽 그림은 사파리, 오른쪽 그림은 크롬의 스타일이다. 이처럼 각 브라우저마다 제공하는 요소의 기본 스타일이 모두 다르다. 개발자들은 디자이너에게 받은 웹디자인을 구현하기 위해 각각의 브라우저에 따라 다른 스타일을 부여 해야한다는 문제가 생긴다. 이렇게 비효율적인 상황을 해결하기위해 reset.css를 사용한다. 💡 그렇다면 reset.css는 모두 똑같은걸 쓸까? 일단 회사마다 다르다. reset.css를 제공해주는 사이트들이 있지만 그걸 베이스로 회사마다 수정하여 사용한다고 한다..

TIL :: block vs inline vs inline-block의 차이점에 대해 1분안에 말하시오.

HTML에서 구조를 짜면 어떤 태그는 일렬로 있고, 어떤 태그는 내용에 한 글자만 있다고 다음 줄로 넘어가있는 걸 볼 수 있다. 조금 배우고나면 차이에 대해서는 알지만 정확한 설명이 아직 단번에 나오지 않아 정리해보았다. block 화면을 수직 분할 (한 줄을 모두 차지) -> width / height 지정 O inline 화면을 수평 분할 (한 줄에 여러 inline 요소가 배치됨 == 글자를 생각하면 된다) -> width / height 지정 X inline-block inline의 수평 분할 특성 + block의 크기 지정 가능 1. Block-level elements 블록요소는 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소들을 의미한다. 언제나 새로운 라인에서 시작하고, 좌우..

[HTML] Tabular data <table>

1. 테이블을 생성할 때 사용하는 태그로 하나의 테이블을 정의한다. 컨테이너 요소로 내부의 요소들을 묶을 때 사용하는데 내부에는 제목(caption)과 행(tr), 열(col) 그리고 셀(td)과 셀의 제목(th) 역할을 하는 여러 요소들이 자식으로 사용된다. 제목부터 표까지 포함한 큰 영역을 의미한다. 2. 테이블의 제목이나 설명을 의미하므로 제목에 맞게 요소의 첫번째 자식으로 사용해야한다. 스크린리더를 고려해 달아주어야한다. 3. , , : 머리글 : 본문 : 바닥 글 테이블의 내용이 많을 때 와 는 머리글과 바닥 글, 본문으로 테이블의 구역을 나누는 요소로 사용한다. 이 요소들은 테이블의 레이아웃에 영향을 미치지 않지만 CSS를 사용하여 디자인의 스타일을 지정할 수 있다. 4., , : 테이블의 행..

[HTML] 웹표준 맞는지 검사하는 법(validator.w3.org)

웹 표준이란? 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 크롬, 파이어폭스 등 브라우저마다 보여주는 다른 부분들이 있다. 나는 주로 크롬을 쓰는데 보다보면 '해당 사이트는 크롬을 기준으로 만들어졌습니다.' 라는 문구를 보게 된다. 이처럼 여러 브라우저들을 맞추기란 쉽지 않다. 하지만 공공기관이나 은행같은 곳에서는 대부분 어느 브라우저를 쓰더라도 동일하게 보여지는데 그게 웹 표준을 지킨 방식이다. 배운지 얼마 안된 입장에서 표준을 지키라는것은 어려운데 레포트계에 카피킬러가 있듯이 코드계(?)..

6일차 :: section? article? div?

section들을 공부하다보면 section을 써야할지 article, div? 아니면아예 없이? 이렇게 고민하게 된다. 그럴땐 구분하기 쉽게 구역의 주제가 명확하면 section, 디자인적으로 나뉘어있고 도저히 의미 구분이 어려우면 div라고 생각하면 된다. 특히나 이번 과제를 하면서 게임 홈페이지들도 찾아봤었는데 게임을 거의 하지 않기에 볼 일이 없었는데 하나의 그림처럼 배경이나 영역이 자연스럽게 이어지는 듯 하게 보여준다. header 로고 같은 경우 을 사용한다. 제목 태그로 텍스트만 들어갈 수 있다고 생각했는데 헤더에 상단로고에서도 쓰인다고한다. 그리고 우측에 검색, 장바구니, 마이페이지를 묶어 위젯이라고 한다. main 하나의 큰 section안에 각 article을 넣는다. section안에..

[HTML] Forms

1. 폼은 정보를 입력하는 영역입니다. 로그인 화면에서 아이디와 비밀번호를 입력하는 것, 회원 가입할 때 정보를 입력하는 양식 등은 모두 폼을 이용합니다. 폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송되고, 전송한 데이터는 웹 서버가 처리하며, 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송합니다. 웹 페이지에 있는 form에 데이터를 입력합니다. 웹 페이지 내 액션이 일어나게 되면 데이터는 웹 서버로 이동하게 됩니다. 웹 서버는 데이터를 처리하기 위해 APP을 호출합니다. 이때 APP은 물리적으로 별도의 서버일 수도 있습니다. 필요에 따라 APP은 DB로 데이터를 전송합니다. 이때 DB는 물리적으로 별도의 서버일 수도 있습니다. DB에서 CRUD 작업이 일어나고..

5일차 :: CSS

✍CSS(Cascading Style Sheet) 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. CSS의 궁극적인 목표: 어떤 브라우저에서도 동일하게 보여야한다. 그래서 reset.css 같이 값을 바꿔준다. div { background-color : orange; } selector : 선택자 property : 속성 value : 값 { 속성 : 값; } : 선언문 선택자 종류 * Universal Selector(전체 선택자) p, section, ul ... Type Selector(태그 선택자) .클래스명 Class Selector(클래스 선택자) #아이디명 Id Selec..

[HTML, CSS] img? background-image는 언제 써야할까

html, css에서는 image를 다룰 수 있는 방법이 많지만 그 중 가장 많이 쓰이는 img, background-image를 언제 사용해야할지 구분이 잘 되지 않았습니다. HTML - img CSS - background-imgae background-image: url(images/background.gif); 는 내가 표현하고 싶은 컨텐츠인 경우에 넣고 background-image는 단순히 데코레이션, 꾸미는 용도의 이미지 삽입일 때 활용한다. 예를 들어, 프로필 사진은 내가 표현하고 싶은 (전달하고 싶은) 컨텐츠임으로 img를 활용하고 배경사진은 전달하는 용도가 아니기에 background-image: url을 활용한다.