CSS ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಪರಿಚಯ ಮತ್ತು ಅದರ ಪ್ರಾಮುಖ್ಯತೆ
CSS ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ (Flexible Box Layout) ಎನ್ನುವುದು ವೆಬ್ ಪುಟಗಳಲ್ಲಿನ ಅಂಶಗಳನ್ನು ಅತ್ಯಂತ ಸುಲಭವಾಗಿ ಮತ್ತು ವ್ಯವಸ್ಥಿತವಾಗಿ ಜೋಡಿಸಲು ಬಳಸುವ ಒಂದು ಪ್ರಬಲ ಲೇಔಟ್ ಮಾದರಿಯಾಗಿದೆ. ಸಾಂಪ್ರದಾಯಿಕ ಲೇಔಟ್ ವಿಧಾನಗಳಿಗೆ ಹೋಲಿಸಿದರೆ, ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಕಂಟೇನರ್ನ ಒಳಗಿರುವ ಐಟಂಗಳ ಗಾತ್ರ ಮತ್ತು ಅವುಗಳ ನಡುವಿನ ಜಾಗವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ವೆಬ್ ವಿನ್ಯಾಸಕರು ಮತ್ತು ಡೆವಲಪರ್ಗಳು ಯಾವುದೇ ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳಿಲ್ಲದೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಲು ಈ ತಂತ್ರಜ್ಞಾನವನ್ನು ಬಳಸುತ್ತಾರೆ.
ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಜನರೇಟರ್ ಉಪಕರಣವು ಈ ಸಂಪೂರ್ಣ ಪ್ರಕ್ರಿಯೆಯನ್ನು ದೃಶ್ಯೀಕರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಬಳಕೆದಾರರು ಕೋಡ್ ಬರೆಯುವ ಮುನ್ನವೇ ತಮ್ಮ ಲೇಔಟ್ ಹೇಗೆ ಕಾಣಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಲೈವ್ ಪ್ರಿವ್ಯೂ ಮೂಲಕ ವೀಕ್ಷಿಸಬಹುದು ಮತ್ತು ಅಗತ್ಯವಿರುವ CSS ಕೋಡ್ ಅನ್ನು ತಕ್ಷಣವೇ ಪಡೆದುಕೊಳ್ಳಬಹುದು.
ಕಂಟೇನರ್ ಗುಣಲಕ್ಷಣಗಳು (Container Properties)
ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಲೇಔಟ್ನ ಮುಖ್ಯ ನಿಯಂತ್ರಣವು ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್ ಅಥವಾ ಕಂಟೇನರ್ನಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಈ ಉಪಕರಣದಲ್ಲಿ ಕಂಟೇನರ್ ವಿಭಾಗದ ಅಡಿಯಲ್ಲಿ ಈ ಕೆಳಗಿನ ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿಯಂತ್ರಿಸಬಹುದು:
- ದಿಕ್ಕು (Direction): ಇದು ಫ್ಲೆಕ್ಸ್ ಐಟಂಗಳು ಜೋಡಣೆಯಾಗುವ ಮುಖ್ಯ ಅಕ್ಷವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಇದರಲ್ಲಿ ನಾಲ್ಕು ಆಯ್ಕೆಗಳಿವೆ:
- ಅಡ್ಡಸಾಲು (Row): ಐಟಂಗಳನ್ನು ಎಡದಿಂದ ಬಲಕ್ಕೆ ಜೋಡಿಸುತ್ತದೆ.
- ವಿಲೋಮ ಅಡ್ಡಸಾಲು: ಐಟಂಗಳನ್ನು ಬಲದಿಂದ ಎಡಕ್ಕೆ ಜೋಡಿಸುತ್ತದೆ.
- ಕಂಬಸಾಲು: ಐಟಂಗಳನ್ನು ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಜೋಡಿಸುತ್ತದೆ.
- ಹಿಮ್ಮುಖ ಕಂಬಸಾಲು: ಐಟಂಗಳನ್ನು ಕೆಳಗಿನಿಂದ ಮೇಲಕ್ಕೆ ಜೋಡಿಸುತ್ತದೆ.
- ಮಡಚು (Wrap): ಐಟಂಗಳು ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಇರಬೇಕೇ ಅಥವಾ ಜಾಗ ಸಾಲದಿದ್ದಾಗ ಮುಂದಿನ ಸಾಲಿಗೆ ಹೋಗಬೇಕೇ ಎಂಬುದನ್ನು ಇದು ನಿರ್ಧರಿಸುತ್ತದೆ.
- ಮಡಚಬೇಡ (No wrap): ಎಲ್ಲಾ ಐಟಂಗಳನ್ನು ಒಂದೇ ಲೈನ್ಗೆ ಒತ್ತಾಯಿಸಲಾಗುತ್ತದೆ.
- ಮಡಚು (Wrap): ಹೊಂದಿಕೊಳ್ಳದ ಐಟಂಗಳು ಮುಂದಿನ ಲೈನ್ಗೆ ಇಳಿಯುತ್ತವೆ.
- ವಿಲೋಮ ಮಡಚು: ಐಟಂಗಳು ಕೆಳಗಿನಿಂದ ಮೇಲಿನ ಸಾಲುಗಳಿಗೆ ಮಡಚಿಕೊಳ್ಳುತ್ತವೆ.
- ವಿಷಯವನ್ನು ಸರಿಹೊಂದಿಸಿ: ಮುಖ್ಯ ಅಕ್ಷದ (main axis) ಉದ್ದಕ್ಕೂ ಐಟಂಗಳ ನಡುವಿನ ಜಾಗವನ್ನು ಇದು ಹಂಚಿಕೆ ಮಾಡುತ್ತದೆ. ಇದರಲ್ಲಿ
ಪ್ರಾರಂಭ,ಕೊನೆ,ಮಧ್ಯ,ನಡುವೆ ಜಾಗ,ಸುತ್ತಲೂ ಜಾಗಮತ್ತುಸಮವಾಗಿ ಜಾಗಎಂಬ ಆಯ್ಕೆಗಳಿವೆ. - ಅಂಶಗಳನ್ನು ಜೋಡಿಸಿ: ಇದು ಕ್ರಾಸ್ ಅಕ್ಷದ (cross axis) ಉದ್ದಕ್ಕೂ ಐಟಂಗಳನ್ನು ಜೋಡಿಸುತ್ತದೆ. ಇದರಲ್ಲಿ
ಪ್ರಾರಂಭ,ಕೊನೆ,ಮಧ್ಯ,ವಿಸ್ತರಿಸುಮತ್ತುಆಧಾರ ರೇಖೆಎಂಬ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಬಹುದು. - ವಿಷಯವನ್ನು ಜೋಡಿಸಿ: ಮಲ್ಟಿ-ಲೈನ್ ಲೇಔಟ್ಗಳಲ್ಲಿ ಸಾಲುಗಳ ನಡುವಿನ ಜಾಗವನ್ನು ಇದು ನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು
ಮಡಚುಆನ್ ಆಗಿದ್ದಾಗ ಮಾತ್ರ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಇದರಲ್ಲಿಪ್ರಾರಂಭ,ಕೊನೆ,ಮಧ್ಯ,ವಿಸ್ತರಿಸು,ನಡುವೆ ಜಾಗ,ಸುತ್ತಲೂ ಜಾಗಮತ್ತುಸಮವಾಗಿ ಜಾಗಎಂಬ ಆಯ್ಕೆಗಳಿವೆ. - ಗ್ಯಾಪ್ (Gap): ಇದು ಐಟಂಗಳ ನಡುವೆ ಮತ್ತು ಸಾಲುಗಳ ನಡುವೆ ಇರುವ ನಿಖರವಾದ ಜಾಗವನ್ನು (numerical value) ಮಾರ್ಜಿನ್ಗಳ ಬಳಕೆಯಿಲ್ಲದೆಯೇ ಹೊಂದಿಸುತ್ತದೆ.
ಐಟಂ ಗುಣಲಕ್ಷಣಗಳು (Item Properties)
ಕಂಟೇನರ್ನ ಒಳಗಿರುವ ಪ್ರತ್ಯೇಕ ಐಟಂಗಳ ನಡವಳಿಕೆಯನ್ನು ಸಹ ಈ ಉಪಕರಣದ ಮೂಲಕ ನಿಯಂತ್ರಿಸಬಹುದು. ನೀವು ಯಾವುದೇ ಐಟಂ ಅನ್ನು ಅದರ ಸಂಖ್ಯೆಯ ಮೂಲಕ ಆರಿಸಿ, ಈ ಕೆಳಗಿನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು:
- ಕ್ರಮ (Order): ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೋಡ್ ಅನ್ನು ಬದಲಾಯಿಸದೆಯೇ ಸ್ಕ್ರೀನ್ ಮೇಲೆ ಐಟಂ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಕ್ರಮವನ್ನು (numerical value) ಇದು ನಿರ್ಧರಿಸುತ್ತದೆ.
- ವಿಸ್ತರಿಸು (Grow): ಕಂಟೇನರ್ನಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಜಾಗವಿದ್ದಾಗ ಐಟಂ ಎಷ್ಟು ಪ್ರಮಾಣದಲ್ಲಿ ಬೆಳೆಯಬೇಕು ಎಂಬುದನ್ನು ಇದು ನಿರ್ಧರಿಸುತ್ತದೆ.
- ಕುಗ್ಗಿಸು: ಜಾಗದ ಕೊರತೆಯಿದ್ದಾಗ ಐಟಂ ಎಷ್ಟು ಪ್ರಮಾಣದಲ್ಲಿ ಕುಗ್ಗಬೇಕು ಎಂಬುದನ್ನು ಇದು ನಿರ್ಧರಿಸುತ್ತದೆ.
- ಆಧಾರ: ಐಟಂನ ಆರಂಭಿಕ ಗಾತ್ರವನ್ನು ಇದು ನಿರ್ಧರಿಸುತ್ತದೆ. ಇದನ್ನು ನಿರ್ದಿಷ್ಟ ಸಂಖ್ಯೆ ಅಥವಾ
ಸ್ವಯಂಚಾಲಿತ ಆಧಾರಎಂದು ಹೊಂದಿಸಬಹುದು. - ಸ್ವಯಂ ಜೋಡಿಸಿ: ಕಂಟೇನರ್ನ ಒಟ್ಟಾರೆ ಜೋಡಣೆಯನ್ನು ಮೀರಿ, ನಿರ್ದಿಷ್ಟ ಐಟಂಗೆ ಮಾತ್ರ ಕ್ರಾಸ್ ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಪ್ರತ್ಯೇಕ ಜೋಡಣೆಯನ್ನು ನೀಡಲು ಇದು ಸಹಕಾರಿಯಾಗಿದೆ. ಇದರಲ್ಲಿ
ಸ್ವಯಂಚಾಲಿತ,ಪ್ರಾರಂಭ,ಕೊನೆ,ಮಧ್ಯ,ವಿಸ್ತರಿಸುಮತ್ತುಆಧಾರ ರೇಖೆಆಯ್ಕೆಗಳಿವೆ.
ಮುಖ್ಯ ಅಕ್ಷ ಮತ್ತು ಕ್ರಾಸ್ ಅಕ್ಷಗಳ ನಡುವಿನ ಸಂಬಂಧ
ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ನ ಸಂಪೂರ್ಣ ಕಾರ್ಯಕ್ಷಮತೆಯು ಮುಖ್ಯ ಅಕ್ಷ (main axis) ಮತ್ತು ಕ್ರಾಸ್ ಅಕ್ಷಗಳ (cross axis) ಮೇಲೆಯೇ ಆಧಾರಿತವಾಗಿದೆ.
ದಿಕ್ಕನ್ನು ಅಡ್ಡಸಾಲು ಇಂದ ಕಂಬಸಾಲು ಗೆ ಬದಲಾಯಿಸಿದಾಗ ಈ ಎರಡು ಅಕ್ಷಗಳು ಪರಸ್ಪರ ಬದಲಾಗುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ದಿಕ್ಕು ಅಡ್ಡಸಾಲು ಆಗಿದ್ದಾಗ ವಿಷಯವನ್ನು ಸರಿಹೊಂದಿಸಿ ಎಡದಿಂದ ಬಲಕ್ಕೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅಂಶಗಳನ್ನು ಜೋಡಿಸಿ ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಅದೇ ದಿಕ್ಕನ್ನು ಕಂಬಸಾಲು ಗೆ ಬದಲಾಯಿಸಿದರೆ, ವಿಷಯವನ್ನು ಸರಿಹೊಂದಿಸಿ ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಮತ್ತು ಅಂಶಗಳನ್ನು ಜೋಡಿಸಿ ಎಡದಿಂದ ಬಲಕ್ಕೆ ಕೆಲಸ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಈ ಅಕ್ಷಗಳ ಬದಲಾವಣೆಯನ್ನು ದೃಶ್ಯೀಕರಿಸಲು ಈ ಉಪಕರಣವು ಅತ್ಯಂತ ಸಹಕಾರಿಯಾಗಿದೆ.
ಸಾಮಾನ್ಯ ಲೇಔಟ್ ಮಾದರಿಗಳು (Common Layout Patterns)
ಈ ಉಪಕರಣದಲ್ಲಿ ಲಭ್ಯವಿರುವ ಪ್ರಿಸೆಟ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಹೆಚ್ಚಾಗಿ ಬಳಸಲಾಗುವ ಸಾಮಾನ್ಯ ಲೇಔಟ್ಗಳನ್ನು ತಕ್ಷಣವೇ ರಚಿಸಬಹುದು:
- ಮಧ್ಯ: ಯಾವುದೇ ಒಂದು ಅಂಶವನ್ನು ಕಂಟೇನರ್ನ ನಿಖರವಾದ ಮಧ್ಯಭಾಗದಲ್ಲಿ ಜೋಡಿಸಲು ಇದು ಬಳಕೆಯಾಗುತ್ತದೆ.
- ನ್ಯಾವಿಗೇಶನ್ ಬಾರ್: ವೆಬ್ಸೈಟ್ನ ಮೇಲ್ಭಾಗದ ಮೆನು ಐಟಂಗಳನ್ನು ಸಮಾನವಾಗಿ ಅಥವಾ ಅಂಚುಗಳಿಗೆ ಸರಿಯಾಗಿ ಜೋಡಿಸಲು ಇದು ಸಹಕಾರಿಯಾಗಿದೆ.
- ಸ್ಟ್ಯಾಕ್: ಅಂಶಗಳನ್ನು ಒಂದರ ಕೆಳಗೆ ಒಂದರಂತೆ ಲಂಬವಾಗಿ ಜೋಡಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
- ಕಾರ್ಡ್ಗಳು: ರೆಸ್ಪಾನ್ಸಿವ್ ಗ್ರಿಡ್ ಮಾದರಿಯಲ್ಲಿ ಮಾಹಿತಿ ಕಾರ್ಡ್ಗಳನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಜೋಡಿಸಲು ಮತ್ತು ಜಾಗ ಸಾಲದಿದ್ದಾಗ ಅವುಗಳನ್ನು ಕೆಳಗೆ ಮಡಚಲು ಇದು ಸೂಕ್ತವಾಗಿದೆ.
- ಸೈಡ್ಬಾರ್: ಮುಖ್ಯ ವಿಷಯದ ಪಕ್ಕದಲ್ಲಿ ಸೈಡ್ಬಾರ್ ಅನ್ನು ಸ್ಥಿರ ಗಾತ್ರದಲ್ಲಿ ಇರಿಸಿ, ಉಳಿದ ಜಾಗವನ್ನು ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ನೀಡಲು ಇದು ಬಳಕೆಯಾಗುತ್ತದೆ.
ಗೌಪ್ಯತೆ ಮತ್ತು ಡೇಟಾ ಸಂಸ್ಕರಣೆ
ಈ ಉಪಕರಣವನ್ನು ಬಳಸುವಾಗ ನಿಮ್ಮ ಡೇಟಾದ ಸುರಕ್ಷತೆಯ ಬಗ್ಗೆ ಯಾವುದೇ ಆತಂಕ ಬೇಡ. ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲೇ ನಿರ್ಮಿಸಲಾಗುತ್ತದೆ. ನೀವು ಇಲ್ಲಿ ಹೊಂದಿಸುವ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು BroBroGo ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ. ಸಂಪೂರ್ಣ ಪ್ರಕ್ರಿಯೆಯು ಸ್ಥಳೀಯವಾಗಿ ನಿಮ್ಮ ಸಾಧನದಲ್ಲೇ ನಡೆಯುತ್ತದೆ.
ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು (FAQ)
ಪ್ರಶ್ನೆ: justify-content ಮತ್ತು align-items ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?
ಉತ್ತರ: justify-content ಐಟಂಗಳನ್ನು ಮುಖ್ಯ ಅಕ್ಷದ (main axis) ಉದ್ದಕ್ಕೂ ಜೋಡಿಸುತ್ತದೆ — ಅಂದರೆ ರೋ ಅಥವಾ ಕಾಲಂ ಹರಿಯುವ ದಿಕ್ಕಿನಲ್ಲಿ — ಆದರೆ align-items ಅವುಗಳನ್ನು ಮತ್ತೊಂದು ಅಕ್ಷದ (cross axis) ಉದ್ದಕ್ಕೂ ಇರಿಸುತ್ತದೆ. ದಿಕ್ಕನ್ನು ರೋ ಇಂದ ಕಾಲಂಗೆ ಬದಲಾಯಿಸಿದರೆ ಎರಡು ಅಕ್ಷಗಳು ಪರಸ್ಪರ ಬದಲಾಗುತ್ತವೆ, ಆದ್ದರಿಂದ justify-content ಮೇಲಿನಿಂದ ಕೆಳಕ್ಕೆ ಮತ್ತು align-items ಎಡದಿಂದ ಬಲಕ್ಕೆ ಕೆಲಸ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
ಪ್ರಶ್ನೆ: ಪ್ರತಿ-ಐಟಂ ನಿಯಂತ್ರಣಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ?
ಉತ್ತರ: ಯಾವುದೇ ಐಟಂ ಅನ್ನು ಅದರ ಸಂಖ್ಯೆಯ ಮೂಲಕ ಆರಿಸಿ, ನಂತರ ಅದು ಖಾಲಿ ಜಾಗವನ್ನು ತುಂಬಲು ಎಷ್ಟು ಬೆಳೆಯಬೇಕು (grow), ಜಾಗ ಕಡಿಮೆ ಇದ್ದಾಗ ಎಷ್ಟು ಕುಗ್ಗಬೇಕು (shrink), ಅದರ ಆರಂಭಿಕ ಗಾತ್ರ (basis) ಮತ್ತು ಅದರದೇ ಆದ ಕ್ರಾಸ್-ಆಕ್ಸಿಸ್ ಜೋಡಣೆಯನ್ನು ಹೊಂದಿಸಿ. ಆರ್ಡರ್ (Order) ಎಚ್ಟಿಎಮ್ಎಲ್ ಮುಟ್ಟದೆಯೇ ಸ್ಕ್ರೀನ್ ಮೇಲೆ ಐಟಂ ಅನ್ನು ಮುಂಚಿತವಾಗಿ ಅಥವಾ ನಂತರದಲ್ಲಿ ಸರಿಸುತ್ತದೆ. ನೀವು ನಿಜವಾಗಿ ಬದಲಾಯಿಸುವ ಐಟಂಗಳು ಮಾತ್ರ CSS ನಲ್ಲಿ ತಮ್ಮದೇ ಆದ ನಿಯಮವನ್ನು ಪಡೆಯುತ್ತವೆ.
ಪ್ರಶ್ನೆ: wrap ಮತ್ತು align-content ಯಾವಾಗ ಮುಖ್ಯವಾಗುತ್ತವೆ?
ಉತ್ತರ: ವ್ರ್ಯಾಪಿಂಗ್ (wrapping) ಆಫ್ ಆಗಿದ್ದರೆ, ಪ್ರತಿಯೊಂದು ಐಟಂ ಅನ್ನು ಒಂದೇ ಲೈನ್ಗೆ ಒತ್ತಾಯಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅವು ಕಿರಿದಾಗಬಹುದು. ಇದನ್ನು ಆನ್ ಮಾಡಿದರೆ, ಹೊಂದಿಕೊಳ್ಳದ ಐಟಂಗಳು ಮುಂದಿನ ಲೈನ್ಗೆ ಇಳಿಯುತ್ತವೆ — ಆ ಸಮಯದಲ್ಲಿ align-content ನಿಯಂತ್ರಣವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಲೈನ್ಗಳನ್ನು ಒಂದು ಗುಂಪಾಗಿ ಜೋಡಿಸುತ್ತದೆ. ಗ್ಯಾಪ್ (Gap) ಮಾರ್ಜಿನ್ಗಳಿಲ್ಲದೆಯೇ ಐಟಂಗಳ ನಡುವೆ ಮತ್ತು ಲೈನ್ಗಳ ನಡುವೆ ಜಾಗವನ್ನು ಹೊಂದಿಸುತ್ತದೆ.
ಪ್ರಶ್ನೆ: ನಾನು ರಚಿಸಿದ ಲೇಔಟ್ನ CSS ಕೋಡ್ ಅನ್ನು ಪಡೆಯುವುದು ಹೇಗೆ?
ಉತ್ತರ: ನೀವು ಉಪಕರಣದಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಿದ ತಕ್ಷಣ ಲೈವ್ ಪ್ರಿವ್ಯೂ ಕೆಳಗೆ CSS ಕೋಡ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಜನರೇಟ್ ಆಗುತ್ತದೆ. ಅಲ್ಲಿರುವ "CSS ನಕಲಿಸಿ" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಕೋಡ್ ಅನ್ನು ಕಾಪಿ ಮಾಡಬಹುದು. ಕ್ಲಿಕ್ ಮಾಡಿದ ತಕ್ಷಣ ಬಟನ್ ಸ್ಥಿತಿಯು "Copied" ಎಂದು ಬದಲಾಗುತ್ತದೆ.