Developer

CSS 요소의 레이아웃[위치, 정렬] display* position* flexible layout* grid layout* 미디어쿼리, 컨테이너, 트랜지션, 트랜스폼, 애니메이션... display : 해당 요소를 사용자에게 어떻게 보여줄 것인가 block 크기를 원하는대로 지정 가능 한 줄 전체 너비를 차지함 (div, p, header, footer, h1~h6, ...) inline 크기 지정 불가 안에 있는 컨텐츠만큼 지정 이웃하는 요소와 나란히 배치되는 특징 ex. a, span, img, ... inline-block inline과 block 속성 모두를 갖고 있는 것 이웃하는 요소와 나란히 배치되고, 크기 지정도 가능 ex. input, ... none 보이지 않는 상태 사용자 화면에서 자..

박스모델 : HTML 요소(태그)는 사각형의 모양을 하고 있다 구성요소에는 테두리 내용물 안쪽여백과 바깥여백 패딩, 마진 패딩: 안쪽 여백 마진: 바깥 여백 ex. padding(margin): 위오아왼 (시계방향) : 위 오왼 아래 : 위아 오왼 : 모두 ex. padding: 9px 3px 2px 5px; 만약 한 방향만 padding 이나 margin을 주어야 한다면 padding: 0 0 16px 0 padding-bottom: 16px; // padding vs padding-bottom의 우선순위는 같음 ; 나중에 나온 것이 덮어씀 top, bottom, right, left 박스사이징 태그(요소)의 크기를 어떤 것을 기준으로 계산할 것인가 box-sizing content-box(기본값) 내..

CSS 속성: 크기(단위) px 절대 크기 지정 방식 내가 정해준 크기가 무조건 적용 rem 문서 요소 최상위 태그 = html의 font-size와의 배율 1rem = 16px (html font-size default value = 16) 2rem = 32px em 상위 요소(부모) font-size의 배율 1.5em = 부모 요소 font-size 1.5배 * 아주 특별한 경우에만 사용 ; 미디어 쿼리 % 부모 요소(상위 요소) 혹은 기준이 되는 요소와의 [비율] * 가장 가까운 요인이 되는 요소와의 비율 ; px, rem, em, & 중 px, rem, &을 대부분 많이 사용 vw(viewpoint width), vh(viewpoint height) 100vw ; 사용자 해상도의 100% 길이 ;..

Text CSS 속성 ** color : 텍스트 색상 letter-spacing : 자간, 문자 단위 간격 word-spacking : 단어 사이 간격 (띄어쓰기 간격) ** text-align : 텍스트 정렬(left, right, center) ** line-height : 줄간 (줄과 줄 사이의 간격) * text-indent : 첫 줄 들여쓰기 (상품목록이나 매거진 사이트에서 들여쓰기가 되어 있는 상태가 많다 ; 다른 곳에서는 잘 쓰지 않음) * text-decoration : 텍스트의 여러 효과(밑줄) 설정하거나 제거 text-transform : 영문자 대소문자 결정 font-variant : 소문자를 더 작은 크기의 대문자로 변환 * text-shadow : 텍스트의 그림자, 번짐 효과 등을..

CSS? ; Cascading Styled Sheets THML 문서에 style 속성을 추가하여 시각적으로 꾸며주는 역할 디자인 부분을 담당 CSS 적용법 (스타일링 기법) 내부스타일링 HTML 문서의 외부스타일링 HTML 문서의 인라인스타일링 요소 안에 직접적으로 style 속성을 활용하여 적용 ex) ... 내부 외부를 포함한 어떠한 CSS보다도 우선순위가 가장 높다 => 내부 스타일 : 한 html 문서 안에 작성 외부 스타일 : html 문서 외부에 작성 인라인 스타일 : 요소 안에 직접적으로 작성 선택자 : 전체 선택자, 요소 선택자, id/class 선택자, 그룹 선택자, 가족 선택자, 속성 선택자, 가상 클래스 선택자, 가상 요소 선택자 CSS 문법 ---- { ... CSS } 전체 선택..

시멘틱 웹 태그 전 세계에 만들어진 웹 사이트가 증가함에 따라 검색 엔진이 사용자가 요구하는 정확하고 가치 있는 정보를 탐색하기 위해 요구하는 사항이 증가 따라서 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 시멘틱 웹 태그의 장점 1. 웹 접근성 : 웹 사이트를 사용하는 어느 누구라도 불편함 없이 평등하게 이용할 수 있도록 접근성 자체를 높이는 행위 2. 검색 엔진 최적화 (SEO) : 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록 태그에 해당 태그의 역할을 통해 이름을 지어주는 것 3. 가독성 ex. ... ... ... ------------------------------------------------- ... ....

유용한 플러그인 중 하나인 VS Code(Visual Studio Code)입니다 무료이기 때문에 유용합니다 마이크로소프트에서 개발한 텍스트 에디터로, 2016년 4월 15일에 정식판이 발표되었습니다 범용 코드 에디터 중 하나입니다 Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and clo..

HTML 까지는 기억이 날 듯 말듯 어릴 때 나모웹에디터로 홈페이지 만들던 세대라 그런지 이건 꽤나 익숙합니다 HTML 이란? Hyper Text Markup Language 보통 퍼블리셔들이 많이 배우는 언어이고 프로그래밍 언어는 아니라고 합니다 HTML과 CSS는 프로그래밍 언어가 아니다 ; html은 마크업 언어, CSS는 스타일 언어 Hyper Text (글, 이미지...) : 현재 페이지의 글 이미지를 초월하여 다른 웹 페이지의 자료들과 연결시켜준다 Markup Language : 웹페이지 상의 컨텐츠를 어떻게 표현할지 명령하는 언어 => 웹 페이지를 이동할 수 있게 해 주고, 다른 웹페이지에 이미지 등 컨텐츠에 접근 가능하고 웹 페이지 내 컨텐츠를 제작하는 언어 => 웹 페이지 때 기초 틀을 ..

이제 막 첫발을 내딛는 초보개발자 개린이(? 어김이 이상하네..)의 공부기록입니다 갈 길이 멀지만 후일 되돌아 보았을 때 이 글이 제 여정의 시작이 되겠지요 UI, UX 기본 개념 UI ; User Interface 사용자가 보는 화면 ex. 입력창, 이미지, 폰트, 색상, 글, 그림, 버튼... 심미적 측면을 고려한 설계 UX ; User Experience 사용자 경험 ; 사용자가 어플리케이션을 이용함으로서 느낄 수 있는 만족감 ex. 회원가입을 하는 동안 사용자가 그 과정에서 느끼는 불편함이 없는가 cf. drop down menu 기능적 효율성을 추구한 구현 => UI, UX 를 고려한다는 것은 사용자가 보고 있는 화면이 어플리케이션을 이용하였을 때 불편함이나 제약 사항이 없는지 고려하여 만든다는..