Html & Css (12) 썸네일형 리스트형 input 아이디 비밀번호 자동완성 막기 회사 사이트에 로그인과 회원가입 등등 input을 많이 사용하였는데 크롬에 자동로그인을 설정한 경우아이디와 비밀번호가 자동으로 나오는데 로그인에서는 그런 경우가 편할지라도 회원가입 폼에서는 그걸 지우고 다시 쓰는 행위가 불편한 것 같아 일부 input은 자동완성을 막기로 하였다 처음에 autoComplete="off"를 적용해보았는데 자동완성이 계속되어 서치해보다가 autoComplete="one-time-code"를 적용했더니 자동완성이 막아졌다또한 autoComplete="new-password" 또한 자동완성이 막아진다(내 코드같은 경우 next.js를 사용하기 때문에 기존의 autocomplete의 c를 대문자로 적용하여야 했다.) *파이어폭스에선 지원이 안된다고 하여 추가적인 보완이 필요할 .. 넘치는 텍스트 줄이기 (ellipsis) 한 문장에 들어가야 할 텍스트들이 주로 서버에서 넘어오는 텍스트들이 많기 때문에 여러 줄에서 한 줄로 줄여야 할 때가 많았다.그럴 때 아주 유용하게 썼던 css가 있는데 난 scss를 사용해서 믹스인을 만들어 사용하니 편했다 overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all; overflow: hidden;: 영역에서 넘쳐난 글자들을 숨김white-space: nowrap;: 줄바꿈이 없어짐text-overflow: ellipsis;: ... 말줄임 효과word-break: break-all;: 어절이 유지되지 않고 끊어져서 줄바꿈 됨 여기서 중요한 점 width를 설정해줘야 한다!! 그래야 크기에 따.. [새싹 프론트엔드] 2주차 - 5 CSS Flex / 구글 클론코딩 / HTML 그리드 레이아웃 플렉스 박스(Flex Box)로 웹사이트 만들기 기본 구조 설계 css 변수 설정방법 변수 - 데이터를 저장할 공간 변수를 설정하여 값이 필요한 곳에 부르기만 하면 됨 사용 이유 : 값을 바꿔줘야 하는 상황에서 값만 바꿔주면 되어 편리하게 바꿔줄 수 있음, 일관성 유지 사용 방법 : head에 :root { --header-font : 15pt; --dark-purple-color : #6a0080; 이런 식으로 작성 후 값을 주고싶은 태그 스타일에 var(--dark-purple-color); 이렇게 자신이 설정한 이름의 값을 지정하면 됨 꼭 호출할 때 var 붙여주기! 작성코드) Google "Google 검색" "I'm Feeling Lucky" CSS :root{ --white-color : #f.. [새싹 프론트엔드] 2주차 - 4 CSS Flex 플렉스 박스 (Flex box) 플렉스 박스가 나오기 전에는 이 속성들로 웹사이트의 레이아웃을 만듬 • Position 속성 • Float 속성 • Table 태그 → 복잡하고 시간이 오래 걸림, 박스 안 아이템들의 수직 정렬 (자식들을 세로로 가운데 정렬할 때 방법이 없어서 line-height에 의존) , 아이템을 동일한 간격으로 배치할 때 제약이 있음 float의 기본 목적 • 이미지와 텍스트를 어떤 방식으로 배치할 것인지를 정하는 css 속성 • ‘배치’와는 전혀 상관 없는 속성으로 박스 배치를 해오고 있었음 플렉스 박스(Flex Box)란? • 가변적인 박스를 만드는 기술 • 박스 요소들을 다양하고 자유롭게 배치할 수 있음 • 반응형 웹사이트를 제작하기에 최적의 기술 플렉스 박스의 축 축 설명 .. [새싹 프론트엔드] 2주차 - 3 반응형 웹 반응형 웹 PC, TV, 스마트 기기 등 다양한 기기에 반응하는 웹 사이트 사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여줌 사용자에게 편리한 웹 사이트를 제공 사용자가 웹 사이트의 내용을 제대로 보기 위해 스크롤 막대를 옮기거나 화면을 확대하는 수고를 최대한 줄일 수 있음 모든 사이트를 반응형 웹 사이트로 만들어야 하나? - 사이트의 용도와 사용자가 주로 접속하는 기기에 따라 결정 반응협 웹 사이트에 적합 PC용 웹 사이트 사용자와 모바일용 웹 사이트 사용자의 접속 빈도가 비슷한 경우 사이트를 하나만 만들어도 PC와 모바일 기기에서 모두 사용 할 수 있음 모바일용 사이트에 적합 사용자가 이동 중에 모바일 기기로 접속하는 경우가 많은 사이트 예) 포.. [새싹 프론트엔드] 2주차 - 2 HTML 목록태그 & 폼태그 목록 태그(List) 리스트 종류 종류 설명 순서 있는 리스트(ordered list) 순서 없는 리스트(unordered list) 정의 리스트(definition list) 리스트 아이템 ... * 는 생략 가능 순서 있는 리스트 예시) 라면을 끓이는 순서 물을 끓인다. 라면과 스프를 넣는다. 파를 썰어 넣는다. 5분 후 먹는다. * 여기엔 소문자, 대문자, 숫자 가능 결과) 순서 없는 리스트 예시) 내가 좋아하는 음식 딸기우유 떡볶이 레몬사탕 결과) 정의 리스트 용어와 설명을 하나의 아이템으로 나열하는 리스트 용어(제목)는 , 설명은 로 표현 용어 설명 * ,생략 가능 예시) 웹 브라우저 종류 Internet Explorer 마이크로소프트에서 만든 브라우저로 현재 국내 시장에서 가장 많이 사용 Fi.. [새싹 프론트엔드] 2주차 - 1 CSS 레이아웃 & HTML 테이블 정렬 수평 정렬 수평으로 요소 정렬 부모 overflow:hidden 속성 지정 자식 float 속성 지정 부모 요소에 overflow:hidden을 지정하는 이유 자식한테 float을 적용하면 한 줄을 독점한다는 div의 개념에서 벗어나 부모 영역을 벗어나 출력순서를 무시한 채 둥둥 떠다니게 됨. 부모가 자식을 감싸지 못하는 상황이 생김. 이로 인해 부모는 자식을 잃게 되고 자식의 높이만큼 가지고 있던 자신의 영역을 제한할 수 없게 되어 자신의 높이값을 잃어버리게 됨. (자식이 있어서 높이가 생긴건데 없어짐으로써 높이가 사라짐) 이 때 부모 요소에 overflow:hidden을 지정하게 되면 부모는 다시 자식만큼의 높이를 감싸줄 수 있게 되면서 높이값을 찾을 수 있게 됨! (부모가 다시 자식 높이만큼 .. [새싹 프론트엔드] 1주차 - 5 CSS 위치 속성 위치 속성 방법 설명 절대 위치 좌표 요소의 X좌표와 Y표를 설정해 절대 위치를 지정 상대 위치 좌표 요소를 입력한 순서에 따른 상대 위치를 지정 position 속성 키워드 설명 static 상대 위치 좌표, 디폴트 relative 초기 위치에서 상하좌우로 이동 absolute 부모를 기준으로 절대 위치 좌표 설정 fixed 화면을 기준으로 절대 위치 좌표 설정 위치 속성 position:static 브라우저의 디폴트 배치 방식 HTML 태그의 작성된 순서대로 출력 위치를 정함 top, bottom, left, right 속성 값은 적용 안 됨 position:relative 기본 위치에서 left, top, bottom, right 속성의 값만큼 이동한 상대 위치에 배치 속성 left - 왼쪽 모서리.. [새싹 프론트엔드] 1주차 - 4 CSS 배경 & 박스 속성 CSS 배경&박스 속성 배경 속성 속성 설명 background-color 배경 색상 지정 background-image 배경 이미지 지정 background-size 배경 이미지의 크기 지정 background-repeat 배경 이미지의 반복 형태 지정 background-attachment 배경 이미지의 부착 형태 지정 background-position 배경 이미지의 위치 지정 background 한 번에 모든 배경 속성 입력 background-image 예시) body { background-image : url(‘BackgroundFront.png’), url(images/‘BackgroundBack.png’); } 중요! / : 폴더 . : 현재 위치(경로) 파일 - 점이 하나 .. : 부모.. [새싹 프론트엔드] 1주차 - 3 CSS 단위 & 글자 속성 CSS 단위 속성 크기 단위 • CSS3에서 가장 많이 사용하는 단위 • font-size, width, height 속성 등에 적용 단위 설명 em 비율 rem 비율 % 퍼센트 px 픽셀 수 cm 센티미터 mm 밀리미터 in 인치 pt 포인터 상대적 em rem % 절대적 px cm mm in pt *em과 rem 차이 em: 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정 → 부모 요소에 따라 기준이 변해야 할 때 (부모 테두리안에서 변하지 않고 싶을 때) 사용 안녕하세요1 안녕하세요2 안녕하세요3 안녕하세요4 결과) rem: 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값 지정 → 웹페이지 내에서 폰트 사이즈를 완전히 고정하고 싶.. 이전 1 2 다음
