본문 바로가기

Study/HTML, CSS

 (18)
[clip-path] rock's easyweb CSS 121강 clip-rect는 이제 안씀. 즐찾-이미지편집/아이콘-clip-path maker에서 쉽게 좌표잡기 가능 px는 상단부터 시계방향기준(이미지의 크기를 기준으로 좌표값 계산하면댐) (0 0, 100px 0, )~~ x축 y축 순서
[css] shape-outside [모양에 맞춰 텍스트 배치하기] - 모든 이미지 파일은 사각형이다. 동그랗게 자른 png 파일도 어쨌든 사각형임을 기억해야함. - 이미지 바깥으로 아예 나가버리면 적용안됨 - img에 클래스 줘서 직접 걸어야함 shape-outside: 모양(크기 at 중심점좌표(위치)) float: left 등으로 일단 글씨가 달려들게해야함! ex) circle(50px at 50% 50%); : 50px 크기에 해당 이미지의 x축 중앙, y축 중앙(50%)에 있는 정 원(%대신 px등 사용가능) 모양에 넣을 수 있는 것 : circle, ellipse(타원형, 수치 2개 필요), inset(이미지의 안에서, 수치 4개필요), polygon 이미지모양대로 흐르게 : 반드시 png여야함. 사방 투명은 안되고 텍스트가 채..
[CSS] Rock's Easyweb - Back to Basic(1) : 컬러, 단위, 선택자, CSS코드 검사 [웹표준] HTML - 내용전달 CSS - 모양(스타일) JAVASCRIPT - 동적, 조작 [컬러] 모든 브라우저에서 동일하게 지원하는 140개의 컬러네임 이것 외에도 헷갈리는 개념은 아래 사이트에서 잡을 것(백과사전처럼 이용) https://www.w3schools.com/colors/colors_names.asp HTML Color Names W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www...
[HTML] Rock's Easyweb - Back to Basic [스크립트 삽입] 스크립트가 많고 무거워지면 body (body 끝부분)에 삽입하는 편이 낫다. 웹사이트 로딩 시 코드 상단부터(head부터) 읽어내리는데 head안에 스크립트를 넣으면 그만큼 로딩이 오래 걸린다. 일단 html과 css파일만 로드되면 모양은 잡혀있고 사용자 입장에서 로딩이 빠르다고 느낀다. [ 공백유지태그] 기본적으로 html은 공백이 몇 칸이든 무시하고 1칸으로 출력한다. 내가 적은 공백 그대로 사용하고 싶으면 태그 사용 시 그대로 출력된다. preserve: 보존하다, 보호하다 [엔티티 코드] 특수문자 사용 시 엔티티 코드로 넣어야 하는 이유는 W3C는 엔터티코드가 아닌 특수문자는 오류로 인식하기 때문이다. 예를 들어 문자로 " 요즘 검색엔진은 keywords보다는 descripti..
[CSS] responsive 반응형 (+vscode 단축키) 반응형: PC용으로 완성된 HTML을 유지한 채 CSS만으로 다양한 기기의 너비에 맞춰 컨텐츠의 너비와 배치를 조절하여 최적화하는 것 =/= 적응형 : 태블릿, 또는 모바일용으로 HTML, CSS, javascript를 별도로 작성하는 것 주로 주소표시줄에 m.으로 시작하거나 마지막에 /mobile/ 또는 /m/으로 끝나는 경우가 적응형이다. 크롬의 경우 브라우저 너비의 크기를 500px까지만 줄일 수 있다. 480px 이하의 화면을 확인하려면 개발자 도구에서 toggle device toolbar를 클릭하여 모바일 화면으로 변경해야한다. 반응형에서의 요소의 비율 계산 계산 결과 작은 값/큰 값(기준 값) * 100 960/960 x 100 = 100% 350/960 x 100 = 36.45% 550/9..
[CSS] transition, animation, transform transition : CSS에서 수치로 구현하는 속성들의 값이 전환되는 과정을 보여주는 애니메이션 ★ 트랜지션의 대상이 될 수 있는 CSS 프로퍼티 : [Box model] width height, max-width, max-height, min-width, min-height padding, margin border-color, border-width, border-spacing ​ [Background] background-color, background-position ​ [좌표] top, left, right, bottom ​ [텍스트] color font-size, font-weight, letter-spacing, line-height text-indent, text-shadow, verti..
[CSS] flex (2) flex-wrap :플렉스 아이템들의 너비가 부모 요소인 플렉스 박스보다 클 경우 넘치는 요소를 교차축 방향으로 쌓을지 결정하는 속성. 사용예시) flex-wrap:nowrap box1 box2 box3 flex-wrap:wrap box1 box2 box3 justify-content : 주축에서 플렉스 아이템을 배치하는 속성 사용예시) box1 box2 box3 align-items :교차축에서 플렉스 아이템을 배치하는 속성 특징 기본값은 flex-strech로서 부모요소의 세로 길이가 지정되어 있다면 해당 높이에 맞춰 모든 요소들의 높이가 늘어난다. 높이가 지정되어 있지 않다면 플렉스 아이템 중 세로 높이가 가장 큰 요소에 맞춰 나머지 요소들의 높이가 늘어난다. 사용예시) box1 box2 box3 ..
[CSS] float, position 기본 개념 정리 float 특징 적용된 요소가 해당 방향으로 이동한다. float이 적용된 요소를 뒤따라오는 요소들이 달려든다.(clear속성으로 해지한다.) 사용예시) .portfolio_list:after{ content: ''; display: block; clear: both; } ★ text-align:right 와의 차이 우측으로 이동하는 것은 같으나 text-align의 경우 공간을 그대로 유지하고 텍스트만 이동해있다. float은 요소 자체가 오른쪽으로 이동했음. position 값 설명 static 기본값 relative 요소의 원래 위치를 기준으로 배치 absolute 가까운 부모 중 position값이 static이 아닌 요소를 기준으로 배치 fixed 브라우저 윈도우를 기준으로 배치 sticky 스..

티스토리툴바