# publishing

seungmimi

vscode를 쓰면서 유용하게 썻던 스니펫 기록 📝 > 스니펫 셋팅에 대한 설명은 이전 글을 참고해주시면 됩니다 https://velog.io/@seungmimi/VScode-%EC%85%8B%ED%8C%85%ED%95%98%EA%B8%B0 1. HTML_선언 2. HTML_임시 이미지 삽입 *Placehold.it: 임시이미지를 url형식으로 삽입 할 수 있는 서비스 > *Placehold.it: 임시이미지를 url형식으로 표시 할 수 있는 서비스 3. CSS_말줄임 처리 4. CSS_말줄임 처리(2줄이상) 5. CSS_아이콘 마크업을 할 때 아이콘 같은 경우는 태그에 배경으로 아이콘 이미지를 지정하는 식으로 작업을 하는데, 위 처럼

seungmimi

1. 확장도구 ⚙️* LiveServer* 작성한 코드를 웹이서 바로 볼 수 있도록 해주는 확장도구 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer > ⚙️ indent-rainbow tab으로 영역을 구분 하였을 때 영역을 색깔 별로 표시시각적으로 영역을 구분할 수 있도록 하는 확장 도구 [https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbo

imyour58

최근 출시되었거나 곧 출시될 흥미롭고 영향력 있는 기능 20가지가 정리 되어있다 ! https://developer.chrome.com/en/blog/whats-new-css-ui-2023/?utm_source=oneoneone 컨테이너 쿼리, 스타일 쿼리, nth-of micro syntax, dynamic viewport units, wide-gamut color spaces, color-mix(), nesting, cascade layers, scoped styles, 삼각함수, 개별 변환 속성, 팝오버, 앵커 위치 지정, 셀렉트메뉴, 이산 속성 전환, 스크롤 기반 애니메이션, 뷰 전환 등 두고두고 보다가 적용해봐야게따 🫡

lee_moi

publishing 모든 진행의 css부분은 styles 로 import받은 module.css를 사용했습니다. hover시 over된 메뉴만 진해지는 메뉴 CSS 폰트 어썸부분은 import 시켜서 해결해주면 됩니다. hover시 내용이 위 아래로 넓어지며 상세내용이 나오기 이미지는 freepik 에서 사용했습니다. CSS hover시 위로 떠오르는 3D애니메이션 이미지는 핸드폰 화면 ui를 사용했습니다. CSS 중요했던 부분 저번과 똑같은 부분도 있는데 transform 을 중복 사용시엔 속성을 함께 입력하자. 그렇지 않으면 뒤에 쓰여진 것이 덮어버린다. transform 속성에서 rotate라는 회전 속성도 있지만skew 속성을 쓰면 더 많은 trans를 줄 수 있다. 선택자에 hover를 붙일시 hover가 되는

lee_moi

publishing 모든 진행의 css부분은 styles 로 import받은 module.css를 사용했습니다. Dropdown menu - 마우스 hover시 드롭다운 메뉴 CSS HoverDetail - 마우스 hover시 detail 요소 표시 CSS HoverToolTip - 마우스 hover시 TOOLTIP창 떠오르기 주의할 점 어떤 요소든 position:absolute를 주는 순간 모두 inline-block으로 변해버린다. transform은 한번에 주는 것이 좋다. 2개를 따로따로 줄 경우 아래쪽에 있는 코드가 위에 있는 코드를 덮어버린다. 가상 클래스:after,:before는 content속성으로 시작하며 해당 선택자의 자식요소가 된다. 고로 가상클래스를 붙인 선택자와 가상 클래스 둘 다 position:absolute속성을 주게 될 경우 부모 요소의 `absolu

lee_moi

publishing border 애니메이션 - 더블 보더 써클 width : 100% 나 width : inherit으로 하나 동일하다 border-radius: 40% 60% 65% 35% / 40% 45% 55% 60% 이런식으로 border-radius는 중첩해서 사용할 수 있다. trasform 속성중 rotate를 사용하면 돌리는 애니메이션을 할 수 있다. transform: rotate(360deg); 입력시 360도 돌리기 animation-derection:reverse; 입력시 애니메이션 효과를 반대로 적용 가능

lee_moi

publishing 오늘부턴 React로 위젯을 하나씩 만들고 그걸 총 집합해서 볼 수 있는 페이지를 만들어 놓으려고 한다. 첫 타자는 loading 애니메이션부터 하나씩 시작해보자 컴포넌트 부분은 react-router-dom을 이용해 각 로딩애니메이션을 볼수있는 board를 만들고 중첩 라우팅을 통해 아래 있는 화면만 바뀌도록 설정해 놓았다. 이후 상세 로딩 애니메이션 간단하게 컴포넌트와 css(모듈 css를 사용했다)를 제작한다면 animation 속성에 있는linear는 키프레임과 키프레임이 넘어갈 때 부드럽게 infinite는 무한반복이다. 원 3개가 들쑥날쑥 커지며 옆으로 흘러가는듯한 그런 애니메이션 로딩이다 transform할 때 왼쪽에서 오른쪽으로 이동할 때 left 0 에서 right 0으로 쓰면 되지 않냐 생각할 수 있다. 하지만 그렇게 사용하면 안된다. keyframe 애니메이션은 tweening시키는 것이기 때문에 left

lee_moi

이번엔 퍼블리싱에서 사용하는 jquery인데 프론트엔드에선 이미 거의 사용을 안하고 있으며 이후 만들 위젯들은 React를 이용해 만들 예정이다. 다만 혹시 퍼블리싱만은 jquery로 사용해야 할 때가 있을지도 모르니 정리만 해봐야겠다. > ## publishing 기본 구문 $('선택자').함수(function(){실행구문;}) $('선택자').함수(function(){$('선택자').메서드();}) 선택자 종류 CSS 클래스 선택자 CSS 아이디 선택자 CSS 태그 선택자 this 필수 함수 종류 click : 클릭 mouseenter : 마우스가 들어올 때 mouseleave : 마우스가 떠날 때 필수 메서드 종류 slideDown() slideUp() stop() show() hide() fadeIn() fadeOut() addClass() removeClass() children() :

lee_moi

publishing CSS 가상 클래스 - 마우스 오버 이펙트(hover) & 트랜지션(transition) 마우스 올리면 :hover로 디자인이 변경되고 transition으로 디자인 변경 때 애니메이션 효과가 들어간다. 이런식으로 a태그에 :hover를 붙여 마우스가 해당 요소에 올라올 때 css가 변경되도록 하고 transition으로 그 변경될 때 애니메이션이 붙도록 해준다. transition은 기본 a태그에서 a:hover 태그로 변경되는데 0.5s(초)가 걸리도록 하라는 얘기이다 **a태그 사용할 때 ... href속성을 비우면 당연히 a태그가 동작하지 않는데 #none를 입력해서 이건 동작은 하지만 일을 안한다 알려주면 좋다(특히 웹

lee_moi

publishing 레이아웃 설계하는 HTML5 시멘틱 태그 가장 상위의 컨테이너 : .container(1번) , .wrapper 문서의 주요 내용을 지정 : main (현재 레이아웃에선 main이 꼭 필요하진 않음) 주제별 콘텐츠 영역 : section(2번) 헤더 영역(로고, 메뉴 , 로그 , 검색등) : header(2번) 제작 정보 및 저작권 정보 표시 : footer(2번) 콘텐츠 내용 넣기 : article(3번)-> 세부 내용 들어갈 때 div 문서를 링크하는 탐색 영역 : nav 세부 사항 요소 : summary / 추가 세부 정보를 정의 : details .container > header, section, footer > article > d

lee_moi

정말 그냥 이렇게 쓰면 이렇게 되는 구나만 알고 있던 지식들이 채워지니까 너무 재밋긴 하다. 확실한 HTML,CSS개념들과 서로의 상관관계등을 알고 프로젝트를 하면 많이 재밋을 것 같다. Next.js도 얼른 같이 해서 팀 프로젝트 완성 못한 부분을 얼른 해야지 > ## publishing HTML 인라인, 블록, 인라인블록 인라인(inline)요소 한줄에 여러개 배치 기본 너비값은 컨텐츠 너비값 크기값을 가질 수 없음 상하 마진은 가질 수 없음 블록(block)요소 한줄에 한개만 배치 기본 너비값은 100% 크기값을 가질 수 있ㅇ므 상하좌우 마진 가질 수 있음 인라인블록(inline-block)요소 한줄에 여러개 배치 기본 너비값은 컨텐츠의 너비값 크기값을 가질 수 있음 상하 마진은 가질 수 있음 인라인 요소 span, a, small, big, em,

lee_moi

당분간 대학 중간고사 기간이라 중간고사 공부를 하면서 진행하다보니 진도 속도는 느릴수도 있을 것 같다. 하지만 하루 약속치는 어지간하면 최대한 도달하도록 노력하자 Publishing 상세 디자인을 위한 CSS 박스모델(border) border-style : 테두리 스타일 지정 value : solid dashed dotted double groove inset outset border-width : 테두리 두께 지정 value : px % thin medium thick border-color : 테두리 색상 지정 value : color **한 번에 여러 테두리 속성 할당 ex)border : 2px solid blue (width, style,

lee_moi

처음 기초부분은 대부분 아는 거지만 정리겸 작성 > ## Publishing HTML 핵심 태그(문단 텍스트 서식) 제목 표시하기 : h1~h6 문단, 줄 바꿈 : p,br 글자 굵게 표시 : b,strong 글자 기울림 표시 : em, i 글자 밑줄 표시 : u 글자 취서선 표시 : s,del 큰 글자 표시 , 작은 글자 표시 : big,small 위 첨자, 아래 첨자 : sup,sub 형광펜 배경색 글자 : mark 수평선 넣기 : hr > - p태그 사용시 주의 사항 : `` 입력후 사이에 바로 입력시 하나로 인식해서 문단 접기가 안된다. 꼭 사이에 엔터키 한번 쳐서 구분시킨뒤에 진행하자 br은 특별하지 않으면 사용 X font-size는 CSS에서 지정하지 않으면 16px이 기본 값이다 big 태그는 HTML 표준에서 제외되었다. HTML 핵심 태그 (목록 만들기) 순서가 있는 목록 : ol >

4ggie97

기존에 만들었던 로그인 폼이 너무 허접해서 적당히 클론할 만한 걸 찾다가 항상 쓰고있던 구글 로그인 폼이 떠올랐다. 바로 분석 고고 ✨ 분석해보기 메인 컬러와 흰색의 조합으로 심플하면서도 직관적인 구글 로그인 폼..!! 구글 로그인 폼이 마음에 든 결정적인 이유는 바로 input에 focus를 줬을 때 발생하는 애니메이션 때문이다. 입력할 때에도 가이드가 사라지지 않는 placeholder와 border의 적절한 CSS 조합이 재밌어보였다. 무작정 따라 만들어보도록 하자. 파악한 것 input의

moonyj06

Post css 에서 기본 className 사용하기 문제상황 post css 에선 사진과 같이 ‘-’ 형태의 기본 클래스 명을 사용하지 못함. -> (인식을 못하기 때문에 스타일 적용 안됨.) > _⇒ 다른 라이브러리를 사용할때 라이브러리에서 자동으로 적용해주는 클래스 명을 custom 하기 어려울 수 있음. 해결방법 &:global(’적용하고자 하는 클래스명’) {…} 식으로 넣어주면 post css 에서도 기본 클래스명 custom 가능!🙌

moonyj06

[빌더] 페이지 내 팝업 UI Publishing https://github.com/Redbrick-Inc/redbrick/pull/402 (GitHub) https://github.com/Redbrick-Inc/redbrick/pull/394 (GitHub) 빌더 내 팝업 UI Publishing 작업 완료 [빌더] content UI Publishing https://github.com/Redbrick-Inc/redbrick/pull/373 (GitHub) https://github.com/Red

withmove

(22.10.24) 1. list 페이지 레이아웃 웹 앱 화면 설계 (22.10.25) 2. remind 1) 레이아웃 : 화면을 나누는 방법 -수직분할 -수평분할 -flexbox >display: flex -부모 요소에만 적용 > -flex-direction: 정렬축 정하기 -flex-wrap: -justify-content: -align-items: -자식 요소에만 적용 2) 웹 앱 화면 설계 -와이어프레임: 웹/앱 개발 시에 레이아웃 뼈대를 그리는 단계로 선과 도형으로 그림 -목업 -id: 고유, 유일한 값 -class: 반복되는 부분을 유형별로 분류할 때 > HTML 태그 / selector

withmove

(22.10.22) 1. list HTML CSS (22.10.24) 2. remind -HTML(structure)구조 -CSS(presentation)스타일 -Java Script(interaction)상호작용 1)HTML -마크업 언어 -html-head-body 트리구조 -요소 element > hi (opening tag) (content) (closing tag) -div -span: content 크기만큼 공간 차지 -ul: 순서없는 리스트 -img: 이미지 삽입/ src/ self-closing tag -a: 하이퍼링크/ href -시맨틱 태그 (header처럼 이름만 봐도 의미를 알 수 있는 tag) (개발자의 이해도 및 가독성 높이기 위해서) -block -inline

withmove

(22.10.20) 1. list 프로그래밍 웹 클라이언트 웹 서버 IntelliJ(JetBrains에서 제작한 상용 자바 통합 개발 환경) (22.10.22) 2. remind 1-1)컴퓨터 : 소프트웨어+하드웨어 구성 1-2)소프트웨어 : 시스템 소프트웨어/응용 소프트웨어 -시스템 소프트웨어 => 응용 소프트웨어 실행 및 원활한 하드웨어 동작을 위함, ex. 운영체제/키보드 드라이버 등 -응용 소프트웨어 => 시스템 소프트웨어 제외한 소프트웨어 1-3)하드웨어 : 컴퓨터의 물리적 장치 -중앙처리장치 CPU -기억장치 -입력장치 -시스템버스 2-1)프로그래밍 : 프로그램을 만들거나 프로그래밍 언어를 이용해 코드 작성하는 것 2-2)프로그래밍 언어 : 컴퓨터 언어와 사람 언어를 매개하는 언어로

yuna706

1. HTML5 html 기본 : DOM 구조로 겹겹이 쌓여있는 구조 form 태그 의의 및 주요 속성 의의: 데이터를 전송하기 위한 구조 https://developer.mozilla.org/ko/docs/Web/HTML/Element/form 주요 속성 action: 데이터를 보낼 url enctype: 데이터의 미디어 타입 ccept-charset: 데이터 인코딩 형식 method: get || post input의 종류 및 주요 속성 종류: text, number, email, password, file, date, radio, checkbox 등 주요속성 2. CSS3 전체 선택자: * {~} ⇒ 초기화할