# CSS3
Next.js 를 이용한 웹프로젝트
웹툰 홈페이지 만들기 ( AVATOON ) 사용 기술- HTML5 / CSS3 / JS / React- Next.js / Node.js / MySql 구현 기능 API를 통해 데이터베이스의 저장된 웹툰의사진 , 제목 , 작가 , 좋아요 수 등을 가져와 보여줌 검색 기능을 통해 제목과 관련된 키워드 , 카테고리별로 검색 가능 검색 결과가 없을 시 랜덤웹툰 추천 인기웹툰 (랭킹)을 통해 좋아요 수가 많은 웹툰을순서대로 보여줌 회원가입 및 로그인 구현 (카카오로그인 포함) 로그인을 통한 기능 좋아요 , 좋아요 취소 댓글 작성 어드민 페이지 구현 어드민 페이지 기능 웹툰 추가 / 삭제 웹툰 에피소드 추가 / 삭제 오늘 날짜의 요일을 'today!'라는 글씨로 알려줌 3000px ~ 360px 까지의 반응형 웹 구현 리스트페이지에서의 내림차순 /
css 스타일 지정방식 3가지
스타일 지정방식 3가지 인라인 스타일 지정방식 테스트 하나 둘 셋 내부 스타일 지정방식 <meta name="viewport" content="width=device-width, initial-sc
img 태그와 background-image의 차이
웹페이지에 이미지를 나타내는 방법 ✨ ① img 태그를 이용한 방법 ② Background-image 속성 이용한 방법 웹 페이지에 이미지를 나타내는 방법에는 대표적으로 이렇게 두가지가 있죠. 이 두 방법에는 어떤 차이가 있을까요? 🌷 👉 img태그는 이미지에 오류가 있을경우 broken img 아이콘과 대체 텍스트가 나타납니다. 👉 img 태그는 alt 속성을 이용해 이미지의 대체텍스트를 입력해 스크린리더 또는 검색엔진이 이미지라는 정보를 인식할 수 있습니다. 👉 컨텐츠의 이해에 도움이 되는 이미지의 경우 img태그를 이용합니다. 👉 img태그는 출력시 포함됩니다. 🌷 Background-image 👉 background-image는 이미지가 표시되지 않을 뿐, 대체 텍스트나 아이콘이 따로 표시되지 않습니다. 👉 background-image는 스크린리더나 검색엔진에 수집되지 않고, 출력시
레이아웃 연습일지 1.
최근에 레이아웃 짜는 연습하면서 처음 접하는 레이아웃이 있어서 어떻게 구현해야할지 고민했습니다. 위 레이아웃인데, 음 뭐라고 설명해야하지.. ? body에 배경색이 들어가있고, 열고 닫을 수 있는 사이드 바에도 body와 다른 배경색이 들어가있을때. 사이드바 열고 닫는 기준 선이 중앙 width 끝부분에 맞춰지고, 사이드 바 왼쪽 배경부분은 사이드바와 배경색을 맞춰야하는 경우....!! 
[CSS] display:Flexbox에 대해
Flexbox 이전의 레이아웃 모듈 Flexbox 이전의 레이아웃 모듈로 Block, Inline, Table, Positioned 가 있었다. Flexbox는 float나 positioning을 사용하지 않고도 유연한 반응형 레이아웃 구조를 보다 쉽게 설계할 수 있다. Flexbox Elements Flex container를 먼저 정의한다. 그리고 Flex container의 display를 flex로 지정해주면 Flex container 안에 있는 요소들은 display를 flex로 받게 된다. flex-direction : 컨테이너가 flex 항목을 쌓으려는 방향을 정의한다. 이 값은 default값은 row값이고, column으로 변경해서 세로로 정렬해줄 수 있다. 이 경우 위에서 아래로 정렬이 된다. 아래에서 위로 정렬하고 싶으면 column-reverse로 변경해주면 된다. flex-wrap : flex 항목이 wrapping 되어야
CSS content의 속성값 - 카운터!
CSS 속성값으로 번호를 매길수 있다는 사실...!!!! 번호가 매겨지는 목록을 만들어야해서 ol 태그를 사용했는데 기본 스타일인 -- 2. -- 3. -- 이 아니라 1 -- 2 -- 3 -- 이렇게 코딩하고싶어서 ol의 list-style 을 초기화한 후, 다시 content로 붙여주는 방법을 선택했는데 음.. 써본적은 없지만 왠지 이런 기능이 있을거같아서 구글링해보니 아주 간편하게 번호를 매기는 속성값이 있었습니다! 요호 자주 쓰이는 속성은 아니라서 저도 처음 써보는데, 요런게 있다는걸 알면 더 잘 활용할수있을거같아서 정리해두기! ① 부모 요소에서 초기화를 해줍니다. ② 자식 요소에 속성 넣어주기!
CSS 선택자 우선순위
CSS의 선택자에는 점수가 있습니다. 여러가지 선택자를 나열한다면, 각 선택자의 점수를 더해 가장 높은 점수를 가진 속성값이 적용됩니다. 만약 합산 점수가 같다면, 나중에 선언된 속성값이 우선해서 적용됨! 속성값 뒤에 !important가 붙은 속성 (999999999+점) html 문서에서 element에 직접 style을 지정한 속성(1000점) #id로 지정한 속성(100점) .클래스, :추상클래스로 지정한 속성(10점) 태그이름으로 지정한 속성(1점) * - 전체 선택자(0점) 상위 객체에 의해 상속된 속성 (점수 없음)
CSS3 배운걸 정리해 보자!🙌 Part-1
📌CSS란? CSS(Cascading Style Sheets)는 HTML 및 XML 기반 문서의 스타일과 레이아웃을 정의하기 위한 스타일 시트 언어. 웹 페이지의 시각적인 표현을 다루며, 웹 페이지의 색상, 레이아웃, 폰트, 크기, 간격 등을 지정하여 디자인할 수 있다. 📌CSS의 주요 기능과 특징 스타일 지정: CSS를 사용하여 웹 페이지의 텍스트, 배경, 여백, 크기, 색상 등 다양한 스타일 속성을 지정할 수 있다. 레이아웃 제어: CSS를 사용하여 웹 페이지의 레이아웃을 제어하고 요소의 위치, 크기, 정렬 등을 조정할 수 있다. 상속과 우선순위: CSS는 스타일 속성을 상속하며, 부모 요소의 스타일이 자식 요소로 전달된다. 또한 스타일 규칙이 충돌할 경우 우선순위에 따라 적용된다. 다양한 선택자: CSS는 요소 이름, 클래스, ID, 속성 등 다양한 선택자를 사용하여 특정 요소를 선택하고 스타일을 적용할 수 있다.
IR 기법의 모든 것 !
1) IR 기법 ? > * IR : Image Replacement * 이미지를 볼 수 없는 사용자에게 대체 텍스트를 제공하는것. 대체 텍스트는 보통 이미지의 alt 속성으로 작성합니다. 하지만 이미지의 alt 속성값으로 담기에는 대체 텍스트의 내용이 너무 길거나, 의미 있는 이미지를 CSS의 Background-image 속성으로 구현했을 때는 어떻게 처리할까요? 바로 이럴때 사용하는 기법이 IR 기법입니다. 2) 어떻게 처리할까요? IR기법을 사용하는 과정을 크게 3단계로 나눠보겠습니다. ① 우선 시멘틱 태그로 의미 있는 마크업을 해 주어야 하구요. ② 대체 텍스트를 화면상에 나타나지 않게 하면서도 ③ 스크린리더에 대체텍스트가 완벽하게 읽히도록 처리해야합니다. 3) 그렇다면 숨김처리는 어떻게? ① 글자는 숨겨지지만 스크린리더에 안읽혀요😡😡 위 코드들은 스크린리더가 인식하지 못하기 때문에 IR기법을 위해 사용하기에 적합하지
Google Font 사용시 display=swap 뜻?
시안 코딩 과제를 하던중 .. 구글폰트에서 웹폰트를 가져오는 중이었는데요 이 소스에서 맨 뒤에 보면 display=swap이라는게 붙어있습니다. 이게 무슨뜻일까요? 갑자기 궁금해져서 찾아보았습니다! 🥴 display=swap은 웹 폰트를 사용할 때 사용되는 옵션 중 하나로, 페이지가 로드될 때 폰트의 다운로드를 지연시키지 않고 페이지의 스타일이 변경되기 전에 빠르게 폰트를 로드할 수 있다. 이를 통해 사용자가 더 빠르게 폰트가 적용된 웹 페이지를 볼 수 있게 된다.
CSS로 말줄임 처리하기 (한줄/여러줄)
웹페이지를 작성할때 말줄임표 처리해줘야 하는 경우가 있습니다. 원하는 너비, 높이에 비해서 텍스트의 양이 많을 때 텍스트가 넘치지 않도록 적당한 부분에서 잘라줘야 레이아웃이 틀어지거나 늘어지는 등의 문제없이 사이트를 예쁘게 화면에 출력할수 있습니다. 또 말줄임표 뒤에 내용이 더 있을거라는 암시가 되기도 합니다. 말줄임표는 CSS로 간단히 처리할수 있는데, 한줄과 여러줄을 처리하는 방법이 각각 다릅니다. 💬 1줄 말줄임표 처리 ① 우선 말줄임 처리를 하려는 요소가 block 요소여야 합니다. 너비를 가져야 하기때문에! ② width와 height값을 지정해줍니다. ③ white-space:nowrap 속성으로 요소안에서 텍스트 줄바꿈이 일어나지 않도록 만들어줍니다. ④ overflow:hidden 속성을 통해 넘치는 부분을 잘라줍니다. ⑤ text-overflow:ellipsis 속성을 적어주면 1줄 말줄임표 처리 끝! 👉 width값,
Reset.css
📌 reset.css를 쓰는 이유 처음 웹은 문서를 공유하기 위해서 시작되었습니다. CSS 없이 HTML 구조만 있던 시절, 각 태그는 기본적인 서식을 가지고 있었고, 이 서식은 각 브라우저마다 다릅니다. 이후 CSS가 생기면서 웹 문서에 원하는 디자인을 자유롭게 그려낼 수 있게 되었는데, 적용한 디자인이 기본서식 때문에 깨지거나, 브라우저마다 다른 디자인이 나타나게 됩니다. 따라서 모든 브라우저에서 똑같은 화면을 출력하고 싶다면 (크로스 브라우징) 우선 어떤 브라우저에서든 같은 화면이 보일 수 있도록 스타일을 통일해줘야 합니다. 📌 reset.css에 들어가야하는 필수적인 코드들
Grid 내용 정리
👀 Grid? 이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식입니다. Grid item의 배치와 정렬은 Grid container 내부의 행과 열의 상호작용을 통해 결정됩니다. ✨ Grid 레이아웃을 구성하는 방법 ① 부모요소에 display:grid; 를 지정해 그리드 컨테이너로 만들어 준다. ② grid-template-colomn/row를 이용해 그리드를 만들어준다. > 그리드 방식은 컨테이너에 행(row)과 열(colume)을 제공하며, > 행과 열을 동시에 제어해 요소를 배치할 수 있다 > > *그리드에서만 쓰이는 단위 1fr > 1fr = 사용가능한 공간에서 비율로 나누
Flex 내용 정리
👀 Flexbox? 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원적 레이아웃 방식. 요소의 배치와 정렬은 Flex-container와 Flex-item간의 상호작용을 통해서 결정됩니다. ✨ flex 레이아웃을 구성하는 방법 ① 부모 요소에 display:flex;를 적용합니다. ② 각 요소들에 원하는 방향, 배치 방법을 설정해줍니다. 이때 부모요소에 사용하는 속성과 자식요소에 사용하는 속성이 구분됩니다. > 플렉스 컨테이너는 기본적으로 블록요소이고, 인라인 요소로 만들고 싶다면 display:inline-flex를 사용합니다. 주축의 기본값은 왼쪽에서 오른쪽을 향하는 가로 방향 주
01. 웹 프로그래밍이란?
본격적으로 개발을 하기에 앞서 간단하게 웹 프로그래밍에 대해 알아보고자 한다. 😎 웹 프로그래밍 HTML5 HyperText : 문서의 개체(텍스트, 이미지 영상 등)가 서로 연결되어 있는 구조. HyperLink : 문서와 문서 사이를 이동할 수 있는 기능. Markup Language : 태그(Tag)를 이용하여 문서나 데이터 구주를 명시하는 언어. ex. CSS3 Cascading : 우선 순위에 따라 적용. StyleSheet : 웹 페이지의 스타일(디자인)을 정의. Javascript Javascript : 웹을 풍부하게 만들어 주는 상대적으로 가벼운 프로그래밍 언어. 웹 프로그래밍 관련 주요 구성 요소 웹 프로그래밍 관련 주요 구성요소로는 Web browser, Web Editor, Native App, Native Web, Hybird 이렇게 5가지가 있다.
빅데이터 Java 개발자 교육 - 39일차 [반응형 웹, JavaScript] (실습)
반응형 웹 반응형 웹이란? 웹 페이지 하나로도 데스크톱, 태블릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지를 이야기함. 장점 유지보수가 용이함 개발 효율성이 증가 미디어 쿼리(Media query)를 사용하여 개발함. JavaScript 자바스크립트란? 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어러, Java와는 별개로 다른 언어이다. 자바스크립트 기본용어 표현식 : 값을 만들어내는 간단한 코드 문장 : 프로그래밍 언어에 실행할 수 있는 코드의 최소단위 종결 : 문장 마지막에 세미콜론(;) 또는 줄 바꿈 키워드 : 자바스크립트를 처음 만들 때 정히잰 특별한 의미가 부여된 단어 식별자 : 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어 자바스크립트 출력 `alert(출력하고
빅데이터 Java 개발자 교육 - 38일차 [HTML 5 및 CSS 3 고급] (실습)
CSS 3 고급 CSS 가시속성 none이기 때문에 위와 같이 대상이라는 글자가 사라져서 보이게 된다. 웹페이지에서 F12를 눌러 개발자모드를 켠 뒤, ``를 선택하여 배경이미지 먼저 image 폴더에 아래와 같이 이미지들을 추가해주었다. 
빅데이터 Java 개발자 교육 - 38일차 [HTML5 및 CSS 3 고급] (이론)
CSS 3 고급 https://docs.google.com/presentation/d/1ppgdgid_cq9ifENfSIOBBTHOAgsCCtwa/edit#slide=id.p18 https://docs.google.com/presentation/d/1NBW38A-OME1u0VjCcO7dBvE-EFHyH0LF/edit#slide=id.p3
웹접근성을 위한 IR기법
| 웹접근성이란? : 고령자 또는 장애인분들이 웹 사이트를 이용함에 있어서 비장애인과 차별없이 동등한 정보에 접근하고 이용할 수 있도록 보장하는 법적의무사항이다. 참고 사이트 ( http://www.wa.or.kr/m1/sub1.asp ) | IR( Image Replacement ) ? : 이미지를 볼 수 없는 사용자에게 일반 사용자와 동등한 정보를 습득할 수 있게끔 적절한 대체 텍스트를 제공해주는 기법이다. || img tag ( HTML5 ) 구성 이미지 대체 텍스트 작성 : 이미지 파일의 경로오류, 파일 깨짐, 삭제로 인해 로딩하지 못함의 문제가 있을때, alt 속성에 써놓은 텍스트가 출력이 된다. || Background img ( CSS ) : CSS 이미지 스프라이트(Image Sprite)* 작업시에는 css파일에서 background-img(또는 background)로 작업하기 때문에 alt