전체 글(122)
-
개발 환경
1. 로컬 서버 : 개발자 PC의 환경2. 개발 서버 : 각 개발자들이 만든 코드를 합쳐 서버 환경에서 테스트해볼 수 있는 환경3. 통합 서버 : 개발 서버에서 코드가 정상적으로 동작한다면 통합 개발 환경에서 테스트 진행, 개발 서버와 마찬가지로 최소한의 리소스로 구성하며 여러개의 컴포넌트를 동시 개발하고 각 컴포넌트가 다른 컴포넌트에 대해서 dependency를 가지고 있을 때 컴포넌트를 통합 및 테스트하는 환경으로 사용함4. QA 서버 : 개발환경에서 QA환경으로 배포가 되면 여기서 QA 엔지니어가 테스트를 수행한다. (기능/비기능) 여기서 이슈가 발견되면 개발자에게 전달되고 개발자는 해당 이슈를 로컬에서 다시 수정5. 스테이징 : 운영 환경과 거의 동일한 환경을 만들어 놓고 릴리즈 이전에 여러가지 ..
2024.10.16 -
웹 구축을 위한 최소한의 조건, 웹 접근성
접근성을 준수한다는 건 뭘까? 대체 텍스트를 꼼꼼하게 넣는 것? 행정기관 프로젝트 보고서를 읽다보면 "콘텐츠 접근성 지침(국가표준) 24개 검사 항목에 대한 점검을 했는가?","장애유형별(시각,지체,뇌병변,청각) 사용자 평가를 실시하고 장애인 사용자의 어려움을 개선했는가?" 등이 나오는데 이것이 바로 접근성이다. 1. 스크린 리더기를 사용하는 장애인과 고령자에게 차별없는 웹을 제공하기 위하여 준수해야하는 것웹 접근성목적 : "한국형 웹 콘텐츠 접근성 지침"이 존재하며, 이 지침에 따라 견고성,인식의 용이성,이해의 용이성,운용의 용이성 준수도구 : 개발자 도구 / 브라우저 부가 기능인 Openwax,firebug,Web Developer / 응용 소프트웨어 방식인 Colour Contrast Analyse..
2024.10.04 -
[Component] 간단한 헤더 만들기
상단바(.top-banner)와 헤더(.header-area)가 분리되어있다. 상단바의 경우 top-banner로 배경과 회색선을 가진 영역을 만들어준 후 ban-wrap로 max-width:1440px,padding:8px 0을 주어 표현의 영역을 작성하였다. 헤더의 경우 header-wrap의 max-width를 1400px로 주고, header-wrap 안의 두가지 개체(logo, gnb-wrap)를 일렬로 정렬하기 위해 두 개체 모두 float:left를 사용하였다. gnb-wrap같은 경우는 width에 calc연산을 주어 로고의 너비만큼의 px를 제한 100%를 차지하게 하였다. #gnb의 경우 자식 개체로 .menu를 가지고 있는데, menu에 display 속성을 주고 menu > li에 ..
2024.01.20 -
[JQuery] 특정 단어가 포함된 행의 색깔 바꾸기
John Resig George Martin Malcom John Sinclair J. Ohn
2024.01.15 -
[HTML/CSS] 뷰포트 중앙정렬하기 2024.01.03
-
[HTML/CSS] em과 rem
HTML 제목태그 문단태그 CSS html { font-size: 20px; } body { font-size: 1rem; /* 20px (html(루트)에 대한 등배단위) */ } .box01 { font-size:10px; } .box01 span { font-size:3em; /* 30px (부모태그에 대한 등배단위) */ }
2023.12.02