CSS 디자인과 주요 속성

캐스케이딩

1) 순서

2) 디테일

3) 선택자


1) 순서에 의한 캐스케이딩

나중에 적용한 속성값이 덮어쓰기가 됨


입력)                                             출력)

      <P> kaorou </p>                       kaorou


        p { color : red; }

        p { color : orange; }



2) 디테일에 의한 캐스케이딩

구체적으로 입력한 선택자가 우선순위


입력)                                출력)

     <header>

     <P> kaorou </p>                       kaorou

     </header>


      p { color : red; }

      header p { color : orange; }



3) 선택자에 의한 캐스케이딩

Type < Class < ID < Style 순으로 우선순위가 높음


선택자 캐스케이딩 1






Style 컬러 red로 지정

ID 컬러 orange로 지정

Class 컬러 yellow로 지정

세개 컬러를 동시에 지정했을 때에는 Style 컬러인 red로 출력됨




선택자 캐스케이딩 2










ID 컬러 orange로 지정

Class 컬러 yellow로 지정

ID 컬러인 orange로 출력됨




선택자 캐스케이딩 3








Class 컬러 yellow로 지정

yellow로 출력됨

h1은 보다 Class로 구체적으로 컬러를 지정해줘서

h1 red보다 Class yellow가 더 우선순위가 됨



Width와 Height

1) Width 너비 설정 

2) Height 높이 설정 

단위 : 픽셀(px), 퍼센트(%) 


Font

1) Font-family 글꼴

브라우저마다 지원하는 폰트 다름

입력 순서대로 우선 순위


2) Font-size 글자 크기

100~900사이


3) Font-style 글자 기울기 nomal, italic, oblique

예시) font-style : italic;


4) Font-weight 글자 두께 100~900 사이의 숫자 입력

예시) font-weight : 100; 또는 font-weight : bold;

100 : lighter, 400 : normal, 700: bold, 900: bolder



Border 테두리 설정

1) Border-style

실선 : solid

점선 : dotted

긴 점선 : dashed

그 외 double, groove, ridge, inset, outset


테두리의 특정 방향과 컬러만 따로 설정 가능

Border-top

Border-bottom

Border-left

Border-right


border-top-color


예시)

<style>

{border : 1px solid red;

border-bottom : 2px dotted orange; }

</style>


<p style="border-style : solid>내용입력</p>



2) Border-width 굵기 설정



3) Border-color 컬러 설정




background

1) background-color 배경컬러 설정


2) background-image url 이미지경로


3) background-repeat 반복 여부

x축으로 반복 : repeat-x

y축으로 반복 : repeat-y

반복하지 않음 : no-repeat


4) backgroun-position 공간 안에서 이미지 좌표를 변경할 때

top, bottom, center, left, right 등


지금까지 정리한 것들 활용하기


<HTML 입력>


HTML 입력


















<CSS 입력>


CSS 입력



















<출력>


출력


이 블로그의 인기 게시물

에어컨 냄새 제거 내부청소나 탈취제 없이 할 수 있습니다

 더운 여름 푹푹 찌는 더위에 참을 수 없어서  에어컨을 틀다 보면 쉰내가 납니다 거슬리는 냄새 때문에 에어컨을 안 켜자니 너무 덥고 에어컨을 키자니 코가 마비가 되는 것 같고 냄새 때문에 내부 청소를 불렀는데 비싸기만 비싸고 먼지는 제거가 됐는데 냄새는 그대로여서 화가 납니다 탈취제는 기관지로 들어갈까 봐 고민을 했지만 냄새 때문에 참을 수가 없어서 뿌렸는데 뿌릴 때만 잠깐이고 냄새가 계속 세어 나옵니다 여름철 에어컨 관리하기 참 힘듭니다 알고 보니 여름철은 습도도 문제인데 에어컨의 차가운 바람과 외부의 더운 온도 두 온도의 차가 심해 에어컨 내부에 습기가 찬다고 합니다 습기가 차면 이걸 없애 줬어야 하는데 습기를 제거하지 않고 그냥 방치한다면 지금과 같이 썩은 내, 쉰내, 꼬랑내, 퀴퀴한 냄새가 납니다 아래 방법대로만 하면  내부의 냄새 입자를 날려주어 냄새가 나지 않게 됩니다 준비물도 리모컨 하나만 있으면 됩니다 주변에 이미 네 집에 실험을 해봤는데 한방에 해결이 됐습니다 총 세 시간 정도 소요되고 방법은 간단합니다 우선 에어컨을 냉방 모드 제일 낮은 온도로 약풍에서 1시간을 틀어줍니다 마지막으로 에어컨을 송풍 모드로 해서 강풍을 2시간을 틀어줍니다 만약에 한 번만으로 냄새가 사라지지 않으면 두 번 하시면 됩니다 두 번 했는데도 없어지지 않는다면 냄새가 엄청나게 축척된 것이니 내부 세척을 하시는 방법밖에 없습니다 주의 사항이 있다면  위에서 말한 대로 입자를 날려야 하니 끝날 때까지 꼭 창문을 열고 틀어주세요 그렇지 않으면 옆에 있는 사람이 날리는 입자를 흡입하게 됩니다 몸에 좋지는 않을 것 같습니다 제가 직접 해봤는데 우유 썩은 내가 진동을 하는 정도에도 한 번이면 다 없어졌습니다 혹시 저희 집 에어컨만 가능한가 싶어서 친구네 집도 해봤는데 모두가 행복해졌습니다 이 방법도 예전에 에어컨에서 하도 쉰내가 나서 못 참아서 내부 청소를 큰 맘 먹고 불렀는데 시간도 오래걸리는데다가 냄새도 그대로여서 여기저기 찾아보다 알아냈습니다 어쨌든 위 방법대로 냄새를 다
자세한 내용 보기

설거지 후 그릇이나 컵에서 비린내 날 때 원인과 해결

 식당이나 집에서 밥을 먹다 보면  그릇이나 컵에서  비린내가 날 때가 있습니다 비린내 왜 나는 걸까요 비린내 때문에 맛있게 먹다가도 입맛이 뚝 떨어집니다 물을 마실 때 비린내가 유독 심하게 나 설거지를 다시 했는데도 비린내가 나서 비위가 상합니다 괜히 컵에 따라 놓은 물이나 음료를 마시기 찝찝해서 자꾸 버리게 됩니다 특히 여름에는 더 쉽게 비린내가 나는 것 같습니다 물론 겨울에도 간간이 물 비린내가 납니다 설거지를 해도 한 것 같지 않아 기분이 나빠집니다 그래서 비린내를 없애기 위해 물 비린내의 원인과 해결 방법을 정리했습니다 비린내가 나는 이유 비린내가 나는 이유에는 여러 가지가 있습니다 우선 세제가 덜 헿궈졌을 때입니다 식당에서는 손으로 설거지를 하는 경우 설거지를 하는 시간을 줄이기 위해 헹구는 시간이 짧습니다 또 식기세척기를 사용하는 경우에도 식기세척기 내부를 잘 세척하지 않습니다 그래서 내부에 고여있는 냄새와 남아있는 성분 때문에 냄새가 나게 됩니다 가정집에서 손으로 설거지를 하는 경우에도 퐁퐁을 많이 묻혀서 사용하거나 너무 찬물로 씻는 경우 또는 헹구는 시간이 짧은 경우에도 비린내가 남을 수 있습니다 또 다른 이유로는 제대로 된 건조가 이루어지지 않아 물때가 생겨 물 비린내가 납니다 해결 방법 위와 같은 경우에는 그냥 흐르는 물에 거품기만 사라지게 헹구면 세제 잔여물이 남아 물 비린내가 계속 납니다 설거지 시 헹구는 시간을 늘려주시든지 아니면 그릇을 헹굴 때 세제가 묻은 곳을 손으로 문질러가며 헹궈주면 비린내가 사라집니다 헹구는 데는 문제가 없는데도 물 비린내가 여전하다면 물때 때문일 수 있습니다 가정이나 식당에서 설거지를 한 후 물기를 바짝 말려야 하는데 설거지가 끝난 후 그릇 건조대에 계속 그릇을 보관하게 되면 싱크대에서 물을 틀 때마다 그릇 건조대에 물이 튀게 됩니다 겨울같이 건조할 때에는 금방 말라서 괜찮지만 여름에는 습도가 높아 물때가 생기기 쉽습니다 설거지가 끝난 후  그릇 건조대에서 그릇이나 컵을 확실하게 말린 후 따로 보관을 하시면
자세한 내용 보기

집에서 쯔란 양고기 만들기 孜然羊肉做法

이미지
오늘 소개할 쯔란양고기 혹은 쯔란양로우는 큐민과 양고기를 볶아 만든 요리입니다 만들기도 쉬워서 양고기를 좋아하시는 분들 특히 양꼬치를 좋아하시는 분들은 무척이나 좋아하실 요리입니다 쯔란, 큐민, 커민, 쿠민시드 전부 다 같은 말입니다 그냥 발음 차이인 것 같습니다 쯔란 孜然은 중국어 발음이고 커민, 큐민 cumin은 영어 발음인 것 같습니다 참고로 말씀드리자면 저는 한국인입니다 다만 대학교와 직장을 중국에서 다녀서 중국 음식에 익숙하고 자취한 기간이 꽤 되기 때문에 왠만한 건 집에서 취미로 만들어먹습니다 코로나 때 한국으로 귀국해 여기저기 이력서를 냈었는데 대학교와 직장을 중국에서 다녔다 보니 이력서를 내기만 하면 이상하게 다들 한국 비자 있냐고 아니면 교포냐고 많이들 묻습니다 어찌 됬든 본론으로 돌아와서 큐민은 향신료에 익숙하지 않으신 분들은 잘 못 드십니다 중국 살 때 친구들이나 부모님이 놀러 오셨을 때 맛집을 선정해서 갔었는데 향 때문에 거부감이 심했습니다 거기에 양고기의 특유의 냄새 때문에 쯔란 양고기는 거의 못 드십니다 일단 쯔란을 접해보지 못하신 분들은 근처 양고기 집에 가서 소스에 나오는 갈색 씨앗을 한번 드셔보시고 쯔란을 구매하시는 것을 추천드립니다 쯔란이 도대체 무슨 맛이냐 하면 약간 매콤한 향과 탄내가 나면서 톡 쏘는 향과 고소함이 어우러집니다 고기 요리, 특히나 양고기에 감칠맛을 불어넣는 최고의 향신료입니다 유럽, 인도, 중국에서는 흔하게 사용하는데 한국에서는 고기 요리에 쯔란보다는 월계수와 후추를 많이 사용합니다 한국에서는 흔하게 사용하지는 않기 때문에 대부분이 양꼬치를 먹을 때 처음 접할 듯 합니다 저는 사용하기도 쉽고 구하기도 쉬운 샤브샤브용 양고기를 사용했지만 양고기 큐브를 사용하셔도 됩니다 뼈만 없으면 양고기 아무 부위, 어떤 모양이든 상관은 없습니다 다만 샤브샤브용 고기가 빨리 익고 간도 빨리 배서 편합니다 추가로 저는 일주일 반찬으로 먹을 예정이라 조금 많이 했습니다 대략 5~6인분 됩니다
자세한 내용 보기