목록프론트엔드 국비교육 (98)
안녕하세요
구매하기 버튼은 클라이언트마다 다르지만 중요하기 때문에 강조되어 있는 것을 좋아하기도 합니다. 너무 눈에 띄지 않는 것은 안됩니다. 호버로 이미지를 다 덮어서 제품을 보이지 않도록 하는 것은 권장하지 않습니다. logo는 무슨 일이 있어도 훼손하면 안됩니다. 텍스트는 가능하면 마름모꼴을 만들도록 합니다. 따옴표는 이쁜 폰트를 따로 적용하는 것도 좋습니다. 마우스를 가져다 대야 나타나는 것 보다는 최초에 다 보이도록 하는 것을 권장합니다. 리스트에 점을 찍는것은 왼쪽이나 오른쪽 정렬일 때만 사용합니다. 텍스트 가운데 정렬일 때는 좋지 않습니다. 섹션 이름을 tab으로는 짓지 않습니다. tab은 기능입니다. [ 주얼리 웹코딩 ] [ html / css / js ]
메모를 실수로 날려버렸습니다... 내일 학원에서 파일을 다시 보며 기억을 살려 메모를 해보도록 합니다. 주얼리 주제와 마우스 이벤트를 넣는 것이 목표였지만 어느 쪽도 쉽지 않습니다. [ 주얼리 웹코딩 ] [ html / css / js ] align-self 를 이용하면 width: 100%;처럼 박스 내에서 커지도록 할 수 있습니다. align-self: stretch; 박스 두개를 float:left; wirdth:50%를 적용하면 각각 50%씩 자리를 차지하여 display: flex; flex: 1; 같은 배치가 됩니다. .Business .inner > div { float: left; width: 50%; padding: 0 15px; }
피그마도 우선 width를 1900px로 맞춥니다. 피그마는 피그마 파일을 만들어 두면 자동저장을 해줍니다. layout grid 기능으로 gird 격자를 만들어 줍니다. columns, count : 12, type : center, width : 70, gutter : 30 ruler를 표시하고 중앙선을 맞춥니다. alt를 누르고 박스를 이동하면 복사가 됩니다. 박스를 만들어 두고 이미지 열기를 한 뒤 박스를 클릭하면 박스사이즈에 맞춰진 이미지가 만들어집니다. shift + r 로 ruler 표시를 전환할 수 있습니다. ctrl + shitf + 4 로 그리드 표시를 전환할 수 있습니다. 이미지를 선택하고 export하여 png형식으로 저장할 수 있습니다. 폰트를 다운받아 이용하려면 브라이우보다는 앱..
이번 주도 자유 주제입니다. 주얼리 사이트를 코딩해보려 합니다. a태그는 inline태그입니다. box처럼 싸면 안됩니다. h1에 a링크를 주려면 h1 안에 a를 포함시켜야 합니다. id를 넣을 것이라면 header, footer, section에 한정합니다. 리액트에서 이미지를 넣을 때는 public 폴더에 넣습니다. 리액트에서는 한 번에 큰 하나의 태그만을 써야합니다. 아래는 세 개의 태그가 같은 레벨에 있기 때문에 오류가 발생합니다. 따라서, 아래와 같은 형태로 감싸주어야 합니다. className은 css작업 효율성을 높일 수 있도록 component의 이름과 똑같이 지어줍니다. header;