Frontend

[CSS] 11 float + 실습 피드백

보호되어 있는 글입니다.

[CSS] IR(Image Replacement) 기법, .blind & .screen_out

IR(Image Replacement) 기법 이미지를 볼 수 없는 사용자를 고려하여 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법이다. 모든 곳이 동일하게 했으면 좋겠지만 여러 방법이 있는 이유는 브라우저도 다양하고 스크린리더 종류마다 다르기때문인것같다. 네이버와 다음 두 사이트에서 IR 기법을 어떻게 처리하는지 비교해보았다. 1. 다음 .screen_out { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } -> width나 height이 0으로 되면 안 읽는 경우가 있다. SEO를 위한거지 스크린 리더를 위한..

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

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

[HTML] Tabular data <table>

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

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

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

[HTML] Forms

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

[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을 활용한다.

[CSS] 가상 클래스? 가상 요소?

이전에 로그인 버튼 만들기를 하면서 ::before, ::after를 사용해서 만들어봤었습니다. 이걸 가상요소라고하는데 기존에 많이 사용했던 :hover같은 가상 클래스와는 다르다고해서 어떤 종류가 있는지 정리해봤습니다. 가상 클래스(Pseudo Classes)❓ - 하나의 콜론(:)을 사용하며, 별도의 class를 지정하지 않아도 요소를 선택할 수 있다. 즉, 가상 클래스는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다. Selector Example Example Description :active a:active Selects the active link :checked input:checked Selects every checked element :disable..

[Frontend] 책 추천

수업 시간에 강사님으로부터 읽어두면 좋을 책들을 추천받아서 정리해보았습니다. 1. 함께 자라기: 애자일로 가는 길 - 김창준 2. 자바스크립트 완벽가이드 - 데이비트 플래너건 3. DOM을 깨우치다: 가치에 대한 완전한 이해 - 코디 린들리 http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788994774510&orderClick=LAG&Kc= DOM을 깨우치다 - 교보문고 가치에 대한 완전한 이해 | 모던 웹을 위한 자바스크립트와 DOM에 대한 고찰“더글라스 크락포드(Douglas Crockford)는 저서인 『자바스크립트 핵심 가이드』에서 JavaScript 언어의 내부를 이해하기 위 www.kyobo..

[CSS] White-space

✍ white-space : 요소가 공백을 지정하는 속성 normal : white-space의 기본 값으로 화면에서 보여지는 영역만큼 줄바꿈을 하게 된다. nowrap : 의 내용이 화면을 넘어가도(뷰 포트보다 문장의 길이가 짧으니) 감싸지 않겠다.는 의미로 화면을 벗어나면 가로 스크롤이 생기며 한 화면에서 보이지 않게 된다. 을 함께 쓰면 한 문장 단위로 줄 바꿈 시행 (영어 기준, 한글은 한 글자씩)=> 반응형 디자인할때 쓰인다. 단어 안에서 줄이 바뀌기를 원하는 경우 overflow-wrap, word-break, hyphens를 사용하세요. word-break : keep-all ➡ 단어 단위로 묶는다. https://developer.mozilla.org/ko/docs/Web/CSS/white..