본문 바로가기
728x90

고윤서16

[2-5] 웹 명함 구축하기 (1) - ul, ol, a태그 , before Ul 태그- Unordered list- 순서가 없는 목록Ol 태그- 순서가 있는 목록바로 자식에는 li 태그들을 사용- Ordered list외부 웹사이트 혹은, 같은 페이지 안에서 이동시키기 위해 사용하는 태그= a 태그= href 라는 속성 안에 있는 주소로 이동시켜줌.= a 태그에는 target 이라는 속성 사용- target 을 통해서 새 탭으로 이동시킬 건지, 한 탭 안에서 이동시킬 건지 결정Anchor 태그 안에 텍스트를 입력함으로서텍스트를 눌렀을 때, href 속성 안에 있는 주소로 이동시킴.target="_blank" 하고 target="_self"이 두 개 쓰임새와 차이를 모르겠음blank 를 사용해서 외부 사이트로 이동을 시키더라도그 창을 닫았을 때 다시 우리 웹사이트로 돌아와서더 서.. 2024. 4. 29.
[2-4] 웹 명함 구축하기 (2) - 웹폰트, 변수 지정, sass 기능 웹 폰트 불러오기- 로컬 폴더woff, woff2로 돼있는 파일 확장자 2개를폴더로 옮겨주기- font 라는 폴더 따로 생성해서 관리해주면 수월// 2-4) 폰트 연결해주기 - @font-face 사용@font-face { // 불러올 폰트파일의 이름 지정 font-family: "KoddiUD OnGothic"; // 폰트 파일의 위치 지정. 폰트 파일에 넣었던 폰트들 넣어주면 된다. // 폰트 확장자가 여러개 있는 경우, // 브라우저마다 호환되는 폰트파일이 다를 수 있음. // 반점(,)을 쓰고 아래에 다른 포맷도 불러와줌. src: url("/font/KoddiUDOnGothic-Regular.woff2") format(woff2), url("/font/KoddiUDOnGot.. 2024. 4. 28.
[2-4] 웹 명함 구축하기 (1) - 기본 설명 정리 (css, sass, js) CSS, Sass 변수 사용CSS와 SCSS에서는 변수를 지정하여 속성 값을 컨트롤할 수 있다.:root 요소 안에--name 을 지정하여 속성 값 저장 가능$name 을 통해 속성 값 저장 가능.- CSS로 컴파일 되기 때문에컴파일 된 후에는 변수처럼 사용할 수 없다.- 여러 파일을 사용하여 변수를 한 번에 관리하기 용이- CSS의 변수는 이후에 JS를 이용해서요소의 속성 값을 변형할 수 있음.= 다크모드 / 라이트모드 사용할 때 자주 사용. SCSS$primary: #FF008A;$sub_primary: #31E6FF;$1h: 1.55em;CSS:root{ --primary: #FF008A;}p{ color: var(--primary);}:root { --primary: #f1c6d6; --tex.. 2024. 4. 27.
[2-3] 웹 명함 구축하기 (2) - 피그마, 일러스트레이터, 기본세팅 피그마의 autoLayoutCSS의 display: flex 와 유사피그마에서 고정된 스페이스가 아닌,오브젝트 안에 있는 요소를 늘렸다가 줄였다가 하려면justify-contents 의 space-between과 같이Advanced layout settings 이거 누르면(Auto layout 우측에 점 3개)Spacing mode에 Space between 확인 가능.누르게 되면 간격을 유동적으로 조정하는 것 확인 가능.피그마에서 고정점인Constraints 를 함께 사용하게 된다면,position:fixed 나position:absolute 같은 것 쉽게 구현 가능로고같은거 소수점 지양하기.피그마 - 설정(Preferences) - Snap To Pixel Grid 체크돼있는지 확인.그 다음, 커맨드.. 2024. 4. 26.
[2-3] 웹 명함 구축하기 (1) - CSS 정리 (vw,vh,position,inline,grid) vw, vhCSS의 반응형 단위= 대표적으로 vw, vh, rem, em을 자주 사용vw - 화면의 가로vh - 화면의 세로ex) 100vw뷰포트의 전체 영역을 100%라고 생각해서100vw 라고 함.em - 부모 폰트 사이즈 영향. 상속(상대) 개념rem - 절대 개념display: inline, display:inline-blockdisplay: inline 하고display: inline-block 차이display: inline= 딱 자기 컨텐츠 영역만 차지= 가로 정렬이 된 것처럼 보임.= 높이가 지정이 안됨.- 높이를 지정해도 설정이 되지 않음.display: inline-block- 자기 컨텐츠 만큼 차지- 높이 값 지정 가능= 인라인 요소지만, 블록 속성 가짐.= 높이 값을 바꿔주지 못했던.. 2024. 4. 25.
[2-2] 반응형 웹 사이트 구축하기 (4) - 코드 보호되어 있는 글 입니다. 2024. 4. 24.
728x90

티스토리툴바