공부 정리

Flexible Box Layout UI디자인과 단방향 레이아웃에 최적화된 모듈 flex container의 자식(flex-item)을 어떤 방향으로도 배치할 수 있고, flex-item의 크기도 유연하게 빈 공간을 채우거나 컨테이너를 넘어가지 않도록 줄어든다 Flex Container 속성 flex-direction initial-value : row flex-direction : row 플렉스 컨테이너의 주축이 행방향으로 글의 작성 방향과 동일하다 (수평축) flex-direction : column 플렉스 컨테이너의 주축이 열방향으로 블록 축과 동일하다 (수직축) 접근성 고려사항 row-reverse나 column-reverse의 경우 DOM의 구조와 그 시각적 표현에 차이가 생기게 된다 이는 스크..

img 문서에 이미지를 삽입한다 src 필수 넣으려는 이미지의 경로를 지정한다 alt 이미지의 대체 텍스트 설명 비 시각적 브라우저, 이미지 불러오기 거부, 유효하지 않은 이미지 등의 이유로 브라우저가 이미지를 항상 표시하지는 않는다 해당 속성은 필수는 아니지만, 스크린 리더가 이 속성의 값을 읽어 사용자에게 이미지를 설명하기 때문에 접근성 차원에서 매우 유용하다 네트워크 오류, 콘텐츠 차단, 죽은 링크 등의 이유로 이미지를 표시하지 못하는 경우에 이 속성의 값을 대신 보여준다 srcset 사용자 에이전트(브라우저)가 사용할 수 있는 이미지 소스의 후보 쉼표로 구분하는 한 개 이상의 문자열 목록이다 url, 공백, 너비 서술자 w, 픽셀 밀도 서술자 x 로 이루어져 있다 서술자를 포함하지 않은 경우 기본..

background background는 단축 속성으로 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 지정할 수 있다. 하위 속성 background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size background-attachment 배경 이미지를 뷰포트내에서 고정할지, 자신의 컨테이닝 블록과 함께 스크롤할지 결정한다 fixed 배경을 뷰포트에 대해 고정한다. 요소와 배경은 함께 스크롤되지 않는다 local 배경을 요소 콘텐츠에 대해 고정한다 요소를 스크롤하면 배경이 콘텐츠와 같이 스크롤된다 배경 페인..

CSS의 모든 요소는 박스이고, 박스를 이해함으로서 레이아웃을 만들거나 요소들간의 정렬을 할 수 있다. CSS box model은 블록 박스이며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용한다. Box의 구성 콘텐츠 박스 콘텐츠가 표시되는 영역 width, height와 같은 속성을 사용할 수 있다 패딩 박스 콘텐츠 주변을 공백처럼 자리잡는다. 크기는 padding 관련 속성을 사용해 제어할 수 있다. 테두리 박스 콘텐츠와 패딩을 둘러싼다 border관련 속성으로 크기와 스타일을 제어할 수 있다. margin 박스 가장 바깥 쪽 레이어 다른 요소와 해당 박스간의 공백의 역할을 한다 margin 관련 속성으로 크기를 제어할 수 있다. 박스의 실제 크기에 포함되지는 않는다. border-box 기존..

HTML의 요소는 블록 레벨 요소와 인라인 요소로 분류돼있다. 블록 레벨 요소 부모 요소의 전체 공간을 차지하여 블록을 만든다. 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다. 항상 앞 뒤를 개행해서 그린다. 블록 요소는 인라인 요소 안에 중첩될 수 없지만, 인라인 요소는 블록 요소에 중첩될 수 있다. (단, a태그의 경우는 예외적으로 안에 블록 요소가 중첩될 수 있다) width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있다 ex article, aside, div, footer, form, header, main, section h1~h6, p, hr dl, dt, dd li, ol, ul 인라인 요..

transform 속성 scale 요소의 크기를 조절한다 x, y축 크기 조절을 별도로 할 수 있음 : scale(x,y) rotate 요소를 회전한다 기본적으로 요소의 중심을 기준으로 회전하는데, transform-origin 속성으로 기준을 변경할 수 있다 translate 자신의 위치에서 x축, y축 이동을 할 수 있다 기준점은 left, top (왼쪽 상단) 음수도 가능하다 모달을 항상 화면 가운데에 정렬하기 .modal { position : absolute; top: 50%; left: 50%; transform : translate(-50%,-50%) } skew 요소를 왜곡시킨다 transform 변환 속성 순서에 관하여 변환 함수는 임력하는 순서에 따라 실행 결과가 바뀔 수 있다 rota..

동적 가상 선택자 반응 선택자 :active 사용자가 마우스로 태그를 클릭한 상태 :hover 사용자가 마우스를 태그에 올려둔 상태 링크 선택자 :visited 방문 기록이 있는 링크를 가지고 있는 a태그를 선택한다 위 예제에서는 붉은색으로 처리했음 :link href 속성을 가지고 있는 a태그를 선택한다 href 속성을 가진 태그는 이름 뒤에 " - 'url' " 이 붙도록 처리했음 Nothing은 a태그이지만, href 속성이 없어서 뒤에 아무것도 붙지 않았음 상태 선택자 :focus 초점이 맞춰진 input태그 등을 선택한다 (위 예제 사진에서 orange) :enabled 사용 가능한 요소를 선택한다 :disabled 비활성화된 요소 (사용 불가능한 요소) 를 선택한다 속성 선택자 특수한 상황에서..

HTML, CSS를 작성할 때 디테일을 하나하나 급히 채워나가는건 매우 복잡한 작업이기 때문에 그림을 그리듯이 전체적인 구도를 잡아놓고 디테일은 천천히 채워나가는 것이 중요하다 순서 1. 시각적인 디자인을 보고 마크업을 최소한으로 작성하기. page가 몇개의 덩어리로 이뤄져있는지 파악하고 마크업을 작성하는 것으로 시작하자 Header, Content, Footer 같은 큰 덩어리부터 잡아두고 시작. 2. 세부적인 레이아웃을 잡아두기 각 태그마다의 콘텐츠들을 이때 추가 (예시 header의 경우) JANE DOE FRONT-END DESIGNER Footer 3. box-shadow같은 속성을 통해 전체적인 윤곽을 확인하면서 채워나가는 것이 중요 현재 태그가 블록인지 인라인인지, 지금 페이지 내에서 얼마나..

Color 속성 폰트의 색상을 설정한다 키워드, HEX, rgb, rgba, hsl, hsla 등의 표기로 설정할 수 있다. Transparent : 투명 currentColor 부모에 color값이 있으면 상속받아 사용하게 된다. div { color: red; /* red text color */ border: 10px solid currentcolor; /* red border color */ } 색상을 설정할 때는 저시력 시각 장애를 위해 폰트의 색상과 배경의 명도 대비도 고려해주면 좋다 font-family 폰트를 지정하는 스타일 속성 사용자 컴퓨터에 설치된 폰트를 사용한다 일반적으로 한 단어로 이뤄진 폰트는 따옴표를 사용하지는 않는데, 그 이상이면 따옴표가 붙는다 p { font-family ..

pdf : https://arxiv.org/pdf/2112.03154.pdf cite : Xu, H., Lu, S., Sun, Z., Ma, C., & Guo, C. (2021).VAE based text style transfer with pivot words enhancement learning. arXiv preprint arXiv:2112.03154. Text Style Transfer(TST)는 하나의 텍스트에 대해서 content는 유지하면서 style정보를 다른 style로 교체하는 것을 목표로 하는 language generation 영역의 task입니다. style : 글의 분위기, 어투, 작풍, 양식 등등 content : 글의 내용, 주제 등등 이는 생성된 문장에서 표현된 style을..