[HTML&CSS] Position , Pseudo selectors - 1 ( UPDATE 2023 - 05 - 26 ) Position Position 의 디폴트는 static position : fixed; 스크롤을 올리든 내리든 초기에 세팅한 그 위치에 고정됨. 상단 메뉴 바 등을 고정할 때 많이 씀. position : fixed; (주의점) top, bottom, left, right 중 하나라도 수정하면, 별개의 레이어처럼 겹쳐질 때, fixed를 제일 상위로 하고 겹쳐짐 posititon : relative; 위치 조금 옮기고 싶을 때 사용. 처음 위치한 곳을 기준으로 상하좌우로 수정함. (부모 요소 무시X) position : absolute; 상하 좌우를 이동 하고 싶을 때 사용함. 부..
[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex ( UPDATE 2023 - 05 - 25 ) 블록과 인라인 블록은 한 줄을 온전히 차지한다. (옆에 못옴) 인라인은 한 줄 안에 같이 있다. 블록에 display: inline 을 하면 박스 속성을 유지하면서 옆에 다른 블록이 올 수 있다. 인라인에 display: block을 하면 블록처럼 한 줄을 온전히 차지한다. 인라인은 높이(height)와 너비(width)가 없다. 브라우저는 요소들에게 자체적으로 style을 주기도한다. (예를 들면, 원치않는 공간=margin) 블록은 박스이다. margin , border , padding 박스는 세 가지 특징이 있다. : margin,border,pad..
[D+15] 2023-05-23 팀 토이 프로젝트 : 랜딩 페이지 (삼성 클론) 목표한 페이지 : 삼성 디자인 🎀 팀원 🎀 양콩(나) 💖깃허브💖 tanmtn님 🖤깃허브🖤 jwcho95님 🖤깃허브🖤 MINZOEY님 🖤깃허브🖤 랜딩 페이지를 8 개로 나누기 1. Header(상단바) 2. 메인 표지 3. Latest 4. 동영상 5. Stories 6. 카테고리 7. News 8. Footer 역할 분담 1 . 양콩 : Header(상단바), 메인표지, Footer, 깃허브 2 . tanmtn님 : 카테고리 3 . jwcho95님 : Latest, 동영상, 머징 4 . MINZOEY님 : Stories, News ❤️ 후기 ❤️ 처음으로 하는 팀 프로젝트인 만큼 부족한 점이 명확히 보였다. 그래서 아쉬움이 ..
자바스크립트로 회원가입폼 유효성 검사하기 aleart 이용해서 회원가입 폼의 유효성을 검사했다. 지금까지 내가 공부한 것들을 최대한 담으려고 했다. 오늘 처음 자바스크립트를 건들기 시작했다. 아예 코드를 새로 짜기보다는, 작성했던 HTML과 CSS 코드들을 재활용하는게 나을 것 같아서 코드들을 다시 살펴봤다. 그동안 이런저런 시행착오(삽질)를 겪은 덕분인지 며칠 차이인데도 개선해야할 부분이나, 오타 등이 눈에 잘 보였다. 오늘 작성한 코드들도 개선할 날이 또 오겠지? 코드 양콩 코딩스쿨 회원가입 - - 00000000 인증번호전송 3:00 인증완료 지역을 선택하세요. 서울 경기도 제주 충청도 전라도 경상도 여성 남성 이전 페이지로 가입하기 *{ box-sizing: border-box; } body{ d..
CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요) CSS의 미디어쿼리를 이용해서 해상도에 따른 색상과 멘트의 변경을 코딩했다. 결과적으론, 두 가지 방식으로 코딩을 했다. 처음엔 무작정 헤딩을 하며 코딩을 했는데.. 완성하고 보니, 아쉬운 마음이 들었다. 왠지 이 것보다는 더 나은 구조로도 만들 수 있을 것 같았다. 결국, 두 번째에는 여러 자료를 구글링 해서 코드 구조를 개선할 수 있었다. display: inherit; 역시 아는 것이 힘이다. *내 노트북 해상도를 기준으로 만들었다. 실제 해상도와는 차이가 있다.😓 처음 작성한 코드 여러 화면 크기로 살펴보세요! 일반 PC 저해상도 PC 일반 태블릿 저해상도 태블릿 body { backgroun..
HTML과 CSS로 블로그 메뉴 만들기 + 반응형 페이지 HTML과 CSS로 간단하게 블로그 페이지를 만들어보자! 메뉴, 글자 깜빡거리는 기능 등을 넣었고, 반응형 페이지(화면 크기에 따라 요소가 변경됨)으로 만들었다. 코드 😘양콩 BLOG❤❤❤ BLOG 양콩BLOG 일기장 챌린지 커리어 방명록 body { margin: 0; font-family: "Noto Sans KR", sans-serif; } .intro{ position: relative; background-image: url("https://i.pinimg.com/originals/14/f7/b0/14f7b04d6048883fa4749556edf50891.jpg"); background-size: cover; background-posit..
